# vue3后台管理系统

**Repository Path**: javafdx/vue3-admin-fu-dev

## Basic Information

- **Project Name**: vue3后台管理系统
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-12
- **Last Updated**: 2021-12-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# imooc-admin-student-fu

#### ESlint 讲解

? Pick a linter / formatter config
ESlint with error prevention only // 仅包含错误的 ESlint
ESlint + Airbnb config // Airbnb 的 ESlint 延伸规则
ESlint + Standard config // 标准的 ESlint 规则

#### eslint 的烦恼

解决：既能代码规范（复杂大量的规则），又能不影响进度

1. 安装插件 prettier
   ♦ 代码格式化工具
   ♦ 开箱即用
   ♦ 直接集成到 vscode
   ♦ 保存时，让代码直接符合 ESlint

需要一下配置

1. 安装 Prettier
2. 在项目中新建.prettierrc 文件，该文件为 perttier 默认配置文件
3. 在该文件中写入如下配置：
   `{ // 不尾随分号 "semi": false, // 使用单引号 "singleQuote": true, // 多行逗号分割的语法中，最后一行不加逗号 "trailingComma": "none" }`
4. 打开 vscode《设置面板》
   设置-->搜索 save，勾选 Format On Save

5. vscode 一个 tab 表示 4 个空格
   eslint 向 2 格
   打开设置 Tab Size 制表符
   改为 2
6. 如果安装了多个格式化代码工具，回合 prettier 发生冲突
   右键-->使用...格式化
   设置默认值

7. eslint 和 perttier 之间的冲突问题
   方法名和括号空格问题
   在 rules 中关闭这个规则

#### 规范提交代码

当你使用 commitizen 进行代码提交(git commit) 时,
commitizen 会提交你在提交时填写所有必须的提交字段

1. 全局安装 COMMITIZEN
   npm install -g commitizen@4.2.4
2. 安装并配置 cz-customizable
   npm i cz-customizable@6.3.0 --save-dev
3. 添加以下配置带 package.json
   `"config": { "comitizen": { "path": "node_modules/cz-customizable" } }`
4. 项目根目录下创建 .cz-config.js 自定义提示文件
   ` module.exports = { // 可选类型 types: [ { value: 'feat', name: 'feat: 新功能' }, { value: 'fix', name: 'fix: 修复' }, { value: 'docs', name: 'docs: 文档变更' }, { value: 'style', name: 'style: 代码格式(不影响代码运行的变动)' }, { value: 'refactor', name: 'refactor: 重构(既不是增加feature, 也不是修复bug)' }, { value: 'perf', name: 'perf: 性能优化' }, { value: 'test', name: 'test: 增加测试' }, { value: 'chore', name: 'chore: 构建过程或辅助工具的变动' }, { value: 'revert', name: 'revert: 回退' }, { value: 'build', name: 'build: 打包' } ], //跳过问题 }`
5. 使用 git cz 代替 git commit，即可看到提示内容

#### 忘记使用 git Hooks（npm 版本在 7.x 以上）

1. git Hooks（钩子函数）
   在执行某个事件之前或之后进行一些其他额外的操作
   阻止不合规的提交信息
2. commitlint: 用于检查提交信息
3. husky: 是 git hook 工具
   --安装依赖
   npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
   --创建 commitlint.config.js 文件
   `
   module.exports = {
   // 继承规则
   extends: ['@commitlint/config-conventional'],
   // 定义规则类型
   rules: {
   // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
   'type-enum': [
   // 当前验证的错误级别
   2,
   // 在什么情况下进行验证
   'always',
   [
   'feat', // 新功能 feature
   'fix', // 修复 Bug
   'docs', // 文档注释
   'style', // 代码格式（不影响代码运行的变动）
   'refactor', // 重构(既不增加新功能，也不是修复 bug)
   'perf', // 性能优化

   ]
   ],
   // subject 大小写不做校验
   'subject-case': [0]
   }
   }`

   --安装依赖
   npm install husky@7.0.1 --save-dev
   -- 启动 hooks,生成.husky 文件夹
   npx husky install
   --早 package.json 中生成 prepare 指令
   npm set-script prepare "husky install"
   -- 执行 prepare 指令
   npm run prepare
   --添加
   npx husky add .husky/commit-msg 'npx --no-install commitliint --edit "$1"'

#### 通过 pre-commit 检测提交时代码规范

1. 执行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"
   添加 commit 时的 hook
   (npx eslint --ext .js,.vue src 会在执行到该 hook 时运行)

#### lint-staged 自动修复格式错误

lint-staged 只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送
无需单独安装，vue-cli 已经帮助我们安装过了。可以直接使用

1. 修改 package.json 配置
   ` "lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix", "git add" ] }`
2. 修改.husky/pre-commit 文件
   npx lint-staged

#### 导入 element-plus

How do you want to import Element?
-->选择 Import on demand （关键）按需引入

❯ Fully import 全局引入

#### vue3 模板