从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…