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

1.vue cli 创建项目

2.项目目录分析

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

.browserslistrc

配置兼容浏览器

" >1%" :代表着全球超过1%人使用的浏览器
“last 2 versions” : 表示所有浏览器兼容到最后两个版本
“not ie <=8” :表示IE浏览器版本大于8（实则用npx browserslist 跑出来不包含IE9 ）
“safari >=7”:表示safari浏览器版本大于等于7

.editorconfig

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

.prettierrc.js

用来配置代码格式化

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"
//   }
// }

.husky

可以防止使用 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",
*/

3.git commit规范

1.commitizen

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

2.commitlint

用来显示提交,单纯使用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

4.相关工具下载

npx husky add .husky/commit-msg

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

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# 限制git commit 命令
npx --no-install commitlint --edit

4.相关工具下载

…elementui…echarts…