❤ VUE3 项目具体配置（二）
一、create-vue快速生成项目原理
介绍：
前段时间我们有去探索了一下vue-cli、cra的原理，生成项目的过程，他是基于webpack的，但是今天我们的主角是create-vue，他是基于vite的，为什么要使用vite而不是webpack呢？因为vite比webpack快。
如何用vite去初始化一个Vue3的项目
npm init vue@latest
或者
yarn create vite <ProjectName> --template vue
配置详情：
Project name：=> 项目名称，默认值：vue-project，可输入想要的项目名称，此处我写的是：demo。
Add TypeScript? => 是否加入TypeScript组件？默认值：No。 我选择的yes
Add JSX Support? => 是否加入JSX支持？默认值：No。
Add Vue Router for Single Page Application development?
=> 是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
Add Pinia for state management? => 是否添加Pinia组件来进行状态管理？默认值：No。
Add Vitest for Unit testing? => 是否添加Vitest来进行单元测试？默认值：No。
Add an End-to-End Testing Solution?=> 是否添加端到端测试？默认值No。
Add ESLint for code quality? => 是否添加ESLint来进行代码质量检查？默认值：No。
二、项目具体配置
脚手架已经帮我们做好的：
vue3+ts 配置路由 Vue Router (vue-router@4)
npm install vue-router@4
安装和配置 pinia (vue2的vuex状态管理)
npm install pinia
三、进一步配置：
（1）安装使用axios
安装
npm install axios（2）安装和配置 Element Plus（完整导入）
npm install element-plus --savemain.ts中引入：
// 引入组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus)
app.mount('#app')测试使用效果：
<el-button type="primary">Primary</el-button>
更多使用迁移到 ==文章vue3 使用Element Plus 中==
（3）配置路由拦截
- 概述
我们的网页需要用户登录后才可以进行显示，不然将其拦截到登录页面。
登录成功后，前端的 header 加上 token 值。如果 token 值为空，说明未登录 - 定义白名单
- 设置路由守卫
// 白名单
const whiteList =['/home', '/about','/']; //定义白名单
// 路由守卫
router.beforeEach((to, from, next) => {
console.log(to, from, next,'路由加载中！');
if (to.matched.length ===0) {
from.name ? next({ name:from.name }) : next('/');
//如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
} else{
//如果未匹配到路由--检测白名单
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单，直接进入
console.log('白名单进入!');
next()
}else{
console.log('重定向！');
next('/');//不满足要求重定向
}
}
});
export default router进一步：
- 抽离为单个模块permission.ts
进一步配置已迁移到 vue3 路由配置中
（4） 配置@相关的配置：
安装path模块插件
npm install --save-dev @types/node
或者
yarn add @types/node修改 vite.config.js 文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
})（5） 进度条NProgress配置：
使用nprogress实现全局loading进度条
npm install nprogress- 自定义NProgress进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";
NProgress.configure({
// 动画方式
easing: "ease",
// 递增进度条的速度
speed: 500,
// 是否显示加载ico
showSpinner: false,
// 自动递增间隔
trickleSpeed: 200,
// 初始化时的最小百分比
minimum: 0.3
});
export default NProgress;- 引入和使用
import NProgress from "../progress";
NProgress.start() //使用
NProgress.done() //停止
（6） js-cookie配置：
一个简单的,轻量级的 处理cookies的js API，用来处理cookie相关的插件
安装：
npm install --save js-cookie安装成功
引入
import Cookies from 'js-cookie'使用
- 添加cookie
// 创建一个名称为name，对应值为value的cookie，由于没有设置失效时间，默认失效时间为该网站关闭时
Cookies.set(name, value)
// 创建一个有效时间为7天的cookie
Cookies.set(name, value, { expires: 7 })
// 创建一个带有路径的cookie
Cookies.set(name, value, { path: '' })
// 创建一个value为对象的cookie
const obj = { name: 'ryan' }
Cookies.set('user', obj)- 获取cookie
//获取指定名称的cookie
Cookies.get(name) // value
// 获取value为对象的cookie
const obj = { name: 'ryan' }
Cookies.set('user', obj)
JSON.parse(Cookies.get('user'))
// 获取所有cookie
Cookies.get()- 删除cookie
// 删除指定名称的cookie
Cookies.remove(name) // value
// 删除带有路径的cookie
Cookies.set(name, value, { path: '' })
Cookies.remove(name, { path: '' })（7） 去掉开发模式下的console.log控制台输出
Vue.config.productionTip = false（8） 安装使用sass
npm install sass
以下命令备用：
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass（9） 为项目自定义主题色
文章地址：
五、更多配置：
（9） 通过路由为项目配置PC端和后台admin管理端（完成）
（10）为项目配置登录页面（完成）
（11）为项目配置注册页面（完成）
（12）登陆成功以后进入后台，未登录则返回登录页（完成）
（13）为项目配置ElementuiIcon 图标 SVG图标（完成）
（14）配置左侧菜单组件–根据路由自动生成（完成效果）
（15）配置PC顶部菜单组件–根据路由自动生成…
格外注意一点：（规范点击事件写到el-menu-item 上）
### （16）安装和配置 echarts
yarn add echarts --save####（17）Vue结合Export2Excel.js导出excel，多sheet
导出excel
