vue3最新项目技术构建后台管理系统
- 一、技术要求
- 二、安装pnpm
-
- 2.1 构建vite
- 三、项目配置
-
- 3.1 eslint 配置
- 3.2 prettier配置
- 3.3 stylelint配置
- 3.4 配置husky
- 3.5 配置commitlint
- 3.6 pnpm 强制安装
- 四、Element-plus 引入
-
- 4.1 完整引入
- 4.2 国际化配置
- 4.3 配置别名
- 4.4 Env环境配置
- 4.5 svg 配置
- 4.6 scss 的配置
一、技术要求
- node >16.0.0及以上
- npm、yarn、pnpm 依赖管理（推荐pnpm）
二、安装pnpm
- 安装
npm i -g pnpm
- 查看
pnpm -v
2.1 构建vite
pnpm create vite
三、项目配置
3.1 eslint 配置
- 中文官网: http://eslint.cn/
安装
pnpm i eslint -D
生成配置文件：eslint.cjs（vite配置eslint24年4月期,eslint.config.js）
npx eslint --init
生成的最新文件配置
检验
# 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier": "^5.1.3",
# vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南
"eslint-plugin-vue": "^9.24.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.24.1",
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
为ESLint没有找到vue-eslint-parser解析器
npm install vue-eslint-parser -save-dev
3.2 prettier配置
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
{
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"tra
