❤ VUE3 项目配置（二）主推 yarn_vue3项目配置-CSDN博客

❤ 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 --save

main.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）为项目自定义主题色

文章地址：
http://t.csdn.cn/9NXwP

五、更多配置：

（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