流程清单式项目准备包管理器选择pnpm npm、yarn、pnpm三个指令对比 tips:创建项目不要在根目录上（有可能

包管理器选择pnpm

npm install -g pnpm 全局安装pnpm
pnpm create vue 创建项目

npm、yarn、pnpm三个指令对比

tips:创建项目不要在根目录上（有可能会提示权限不够），先创建子目录，再在子目录上创建

如果pnpm有新版本了，终端会自动提醒，根据指示升级版本就好

corepack prepare pnpm@8.6.7 --activate 升级版本
pnpm -v 检查是否更新完成

根据需要和提示进行项目配置

Eslint配置

Eslint 配置文件.eslintrc.cjs（专注代码规范）
Prettier（专注于代码的美观度，格式化工具）
vue组件名称多单词组成（忽略index.vue）
props解构（关闭）

// 在.eslintrc.cjs后增加配置 rules: { // 1. 禁用格式化插件 prettier format on save 关闭 // 2. 安装Eslint 插件 '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 解构的校验 'no-undef': 'error' }

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

tips：安装Eslint且配置保存修复，不要开启默认的自动保存格式化

Husky 提交前做代码检查

1. git init 初始化 git 仓库
2. pnpm dlx husky-init 配置 husky 
3. 修改 .husky/pre-commit 文件 
   将 npm test 改成 pnpm lint 全量检查

暂存区 eslint 校验

1. pnpm i lint-staged -D 安装 lint-staged 包
2. package.json 配置 lint-staged 命令
  // 添加在"devDependencies"后面
  "lint-staged": {    "*.{js,ts,vue}": [      "eslint --fix"    ]  }
  // 添加在"scripts"里面
  "lint-staged": "lint-staged"3. .husky/pre-commit 文件修改
   将 npm test 改成 pnpm lint-staged

目录调整

删除无用的初始化的默认文件
清空”assets“、”components“、"stores"、"views" 文件夹
修改剩余代码内容
将”router/index.js“ 中 routes: 配置清空

”App.vue“ 内容清空
”main.js" 删除导入的css样式
新增调整需要的目录结构
"src" 中新增 “api" 和 ”utils" 文件
拷贝全局样式和图片，安装预处理器支持

  pnpm add sass -D pnpm add sass -D
  pnpm dev 如果对项目配置文件进行修改，建议重启动项目

vue-router4 路由代码解析

创建路由实例由 createRouter 实现
路由模式
history 模式使用 createWebHistory() 地址栏不带#
hash 模式使用 createWebHashHistory() 地址栏带#
参数是基础路径，默认/

引入 Element Plus 组件库

1. pnpm install element-plus 导包
2. pnpm add -D unplugin-vue-components unplugin-auto-import // 安装插件
3. 修改vite.config.js中的配置

彩蛋：默认 components 下的文件也会被自动注册

Pinia 构建仓库和持久化

1.pnpm add pinia-plugin-persistedstate -D //安装插件2. 配置 main.js   import persist from 'pinia-plugin-persistedstate'
   app.use(createPinia().use(persist))

pinia 独立维护

问题：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一
优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

仓库统一导出

问题：使用一个仓库 import { useUserStore } from `./stores/user.js` 不同仓库路径不一致
优化：由 stores/index.js 统一导出，导入路径统一 `./stores`，而且仓库维护在 stores/modules 中

数据交互 - 请求工具设计

axios配置

创建axios实例：基准地址，超时时间
请求拦截器：携带 token
响应拦截器：业务失败处理，摘取核心响应数据，401处理

1.pnpm add axios //安装 axios2. 新建 utils/request.js 封装 axios 模块 import axios from 'axios'const baseURL = 'http://xxx'const instance = axios.create({ // TODO 1. 基础地址，超时时间})// 请求拦截器 instance.interceptors.request.use(instance.interceptors.request.use( (config) => { // TODO 2. 携带token return config }, (err) => Promise.reject(err))// 响应拦截器 instance.interceptors.response.use( (res) => { // TODO 3. 处理业务失败 // TODO 4. 摘取核心响应数据 return res }, (err) => { // TODO 5. 处理401错误 return Promise.reject(err) })export default instance

整体路由设计

完成整体路由规划【搞清楚要做几个页面，它们分别在哪个路由下面，怎么跳转的.....】

小结：

1.项目前的框架大同小异，重复做的事情就可以通过流程化提高效率

2.按照从整体到局部，从大到小，从上到下的顺序，降低失误率

谢谢您的阅读，如有问题感谢指正！！！

流程清单式项目准备