Vue3 项目完整配置

一、配置简述

• 开发工具：VSCode
• 包管理工具：pnpm
• 代码质量检测：ESLint
• 代码格式化：Prettier
• 暂存区：eslint
• 数据交互：axios
• 页面效果：Element Plus
• Pinia 持久化：pinia-plugin-persistedstate

二、创建项目

1、使用包管理工具 pnpm

速度更快，更节省磁盘

• 安装方式：npm install pnpm
• 创建项目：pnpm create vue 或者使用 npm init vue@latest
• 创建选项：选择 Vue Router、Pinia、ESLint、Prettier
• 进入目录执行：pnpm install

2、新增目录

• apis：API 接口
• composables：组合函数
• directives：全局指令
• styles：全局样式
• utils：工具函数

三、配置 ESLint

ESLint 用于代码质量检测；Prettier 用于代码格式化；配合使用

1、添加代码

在 .eslintrc.cjs 文件中的 module.exports 对象中添加:

,
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, //单引号
        semi: false, //无分号
        printwidth: 80, //每行宽度至多80字符
        trailingComma: 'none', //不加对象|数组最后逗号
        endofLine: 'auto' //换行符号不限制(win mac不致)
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成(忽略index.vue)
      }
    ],
    'vue/no-setup-props-destructure': ['off'], //关闭props解构的校验
    //添加未定义变量错误提示, create-vue@3.6.3 关闭
    'no-undef': 'error'
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2、修改 VSCode 配置

a. 禁用 prettier 插件，安装 ESLint 插件
b. 在设置中添加：

//ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
//关闭保存自动格式化
"editor.formatOnSave": false,
1
2
3
4
5
6

四、husky 工具配置

a. git 提交代码前会帮助我们进行校验，并指出错误的代码
b. 执行 git init 初始化 git
c. 初始化 husky 工具配置，执行 pnpm dlx husky-init && pnpm install

五、暂存区 eslint 校验

a. pnpm lint 命令是全局效验，速度太慢，所以配置暂存区，只校验暂存区
b. 安装 lint-staged 包，执行 pnpm i lint-staged -D
c. package.json 添加 lint-staged 命令:

,
  "lint-staged": {
    "*.{js,ts,vue}":[
    "eslint --fix"
    ]
  }
1
2
3
4
5
6

d. 在 scripts 中添加："lint-staged": "lint-staged"
e. husky/pre-commit 文件中的 npm test 修改为： pnpm lint-staged

六、axios 配置

1、安装创建

a. 安装命令：pnpm install axios
b. utils 包下面的 request.js 文件：

import axion from 'axios'
//为了导入token
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'//改成自己配置的router
//基础地址：如：
const baseURL = 'http://xuantianling.net'

const instance = axion.create({
  //基础地址，超时时间
  baseURL,
  timeout: 10000
})

//请求拦截器
instance.interceptors.request.use(
  (config) => {
    //携带 token
    //const userStore = useUserStore()
    //if (userStore.token) {
      //判断是否有token
      //有token的话每次请求都在请求头上添加上
      //config.headers.Authorization = userStore.token
    //}
    return config
  },
  (err) => Promise.reject(err)
)

//响应拦截器
instance.interceptors.response.use(
  (res) => {
    //if (res.data.code == 0) {
      //根据后端传送的数据判断是否响应成功
      //响应成功，放行
      //return res
    //}
    //响应失败
    //ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    //处理401错误，权限不足||token过期
    //if (err.response?.state === 401) {
      //router.push('/login')
    //}
    //错误的默认情况
    //ElMessage.error(err.response.data.message || '服务异常')
    Promise.reject(err)
  }
)
export default instance
export { baseURL }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

2、测试

a. 创建请求文件

import instance from '@/utils/request'

export const userLoginService = (user) => request.post('/api/login', user)
1
2
3

b. 在 main.js 中进行测试

userLoginService(user).then(res => {
  // 获取用户登录返回的信息
  console.log(res)
})
1
2
3
4

七、导入 Element Plus

a. 执行命令：pnpm install element-plus
b. 按需导入：npm install -D unplugin-vue-components unplugin-auto-import
c. 在 vite.config.ts 文件中添加：

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

八、Pinia 持久化实现

a. 安装插件：pinia-plugin-persistedstate，命令：pnpm install pinia-plugin-persistedstate
b. 开始持久化：在对应模块第三个参数传入 persist，设置值为 true

九、其他

导入 .scss 文件需要安装 sass 插件

a. 很大几率是要使用 .scss 文件
b. 安装命令：pnpm add sass -D

路径提示

插件 path in tellisense 配置一下就有路径提示了