从0搭建一个后台管理系统cms_k6

[外链图片存储失败，源站可能有防盗链机制，建议保存图片直接上传(img-NM5ME2K2-1658821073622)(C:\Users\k6\AppData\Roaming\Typora\typora-user-images\image-20220720100544933.png)]

配置兼容浏览器

" >1%" :代表全球1%以上人使用的浏览器 “last 2 versions” : 所有浏览器都与最后两个版本兼容 “not ie <=8” :表示IE浏览器版本大于8npx browserslist 跑出去不包括IE9 ） “safari >=7”:表示safari浏览器版本大于或等于7 

EditorConfig在不同的编辑器和IDE编码样式定义和维护一致。

# Editor configuration, see http://editorconfig.org  root = true # 匹配所有文件 [*] # 设置字符集 charset = utf-8 # 缩进风格，可选"space"、"tab" indent_style = space # 缩进的空格数 indent_size = 2 # 最后换行符，可选"lf"、"cr"、"crlf" end_of_line = lf # 在文件结尾插入新行 insert_final_newline = true # 删除一行中前后空 trim_trailing_whitespace = true  [*.md] max_line-length = off trim_trailing_whitespace = false   

用来配置代码格式化

npm install --save-dev --save-exact prettier 

module.exports={   // 1.一行代码的最大字符数默认为80(printWidth: <int>)   printWidth: 80,   // 2.tab宽度为2空格(tabWidth: <int>)   tabWidth: 2,   // 3.是否使用tab缩进，我们使用空间(useTabs: <bool>)   useTabs: false,   // 4.结尾是否加分号，false在某些情况下，只会导致某些情况ASI在错误的工况下，在开头加分号，我选择了无分号结尾的风格(semi: <bool>)   semi: false,   // 5.使用单引号(singleQuote: <bool>)   singleQuote: true, } ~~~~~~~~~我是分割线~~~~~~~~~ //以下代码为package.json添加  // git hooks // 可以设置在git提交前格式化( pre-commit hook )，这样，我们仓库的代码就格式化了。  // 只需要在package.json添加一些配置。   // { //   "husky": { //     "hooks": { //       "pre-commit": "lint-staged" //     } //   }, //   "lint-staged": { //     "**/*": "prettier --write --ignore-unknown" //   } // } 

可防止使用 Git hooks 有些不好 commit 或者 push

npx husky-init && npm install 下载并配置husky命令 

.husky下面有一个文件夹pre-commit文件 我理解这个文件是用来拦截的commit的  ~~~~~~~ #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh"  npm run lint /////代码提交前执行脚本 eslint检测  /* "lint": "vue-cli-service lint", */  

npm install -g commitizen 

安装完成后，执行初始命令 commitizen init cz-conventional-changelog --save --save-exact 

以上操作完成后均使用git cz 代替git commit提交代码，自动生成符合格式的选项commit message.

使用 git cz 此时将需要选择 type，常用类型如下： feat: 表示增加了一个新功能 fix: 表示修复了一个 bug docs: 说文档只修改了 style: 表示修改格式、书写错误、空格等不影响代码逻辑的操作 refactor: 修改代码不是新功能或修改 bug，例如，代码重构 perf: 代码修改了提高性能的代码 test: 表示修改了测试代码 build: 表示修改了编译配置文件 chore: 无 src 或 test 的操作 revert: 回滚操作 

? What is the scope of this change (e.g. component or file nam e): (press enter to skip) login /////本次变更影响的范围 

Write a short, imperative tense description of the change (max 88 chars): test cz //描述.限制80字符 

Provide a longer description of the change: (press enter to skip) //长描述 

Are there any breaking changes? ///是否是一个变化？ 

Does this change affect any open issues? (y/N) ///这次修改是否作用于开源issues 

用于显示提交，简单使用commitizen不能限制提交

npm install --save-dev @commitlint/config-conventional @commitlint/cli 

生成配置文件commitlint.config.js

module.exports = {   extends: ['@commitlint/config-conventional'], } 

注意

windows 计算机执行下列命令报错的原因是不识别$1 ,苹果没问题

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1" 

上述命令做了两件事，首先创建了husky/commit-msg文件 ,添加到文件下npx --no-install commitlint --edit 命令 ,因此需要先执行

npx husky add .husky/commit-msg 

之后在commit-msg手动添加文件

#!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh"  # 限制git commit 命令 npx --no-install commitlint --edit  

npx husky add .husky/commit-msg 

之后在commit-msg手动添加文件

#!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh"  # 限制git commit 命令 npx --no-install commitlint --edit  

…elementui…echarts…