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'}

2、修改 VSCode 配置

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

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

四、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"]}

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 }

2、测试

a. 创建请求文件

import instance from '@/utils/request'export const userLoginService = (user) => request.post('/api/login', user)

b. 在 main.js 中进行测试

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

七、导入 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()],}),],
})

八、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 配置一下就有路径提示了