diff --git a/commitlint.config.js b/.commitlintrc.js similarity index 64% rename from commitlint.config.js rename to .commitlintrc.js index 2d880dc..ace6d55 100644 --- a/commitlint.config.js +++ b/.commitlintrc.js @@ -7,5 +7,12 @@ module.exports = { // 新增、修复、文档、不影响逻辑的代码格式、重构、测试、回滚、编译、合并、优化、配置、其他 ['feat', 'fix', 'doc', 'style', 'refactor', 'test', 'revert', 'build', 'merge', 'perf', 'conf', 'chore'], ], + 'type-case': [0], + 'type-empty': [0], + 'scope-empty': [0], + 'scope-case': [0], + 'subject-full-stop': [0, 'never'], + 'subject-case': [0, 'never'], + 'header-max-length': [0, 'always', 72], }, }; diff --git a/.eslintrc.js b/.eslintrc.js index ed518d9..ec0c56f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -106,5 +106,6 @@ module.exports = { defineProps: true, defineEmits: true, defineExpose: true, + resolveDynamicComponent: true, }, }; diff --git a/.vscode/settings.json b/.vscode/settings.json index e1ac849..3fc2f52 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,6 +5,7 @@ "git.autofetch": true, "javascript.updateImportsOnFileMove.enabled": "always", "typescript.updateImportsOnFileMove.enabled": "always", + "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll": true, "source.organizeImports": true diff --git a/README.md b/README.md index ac90b81..d2d93e4 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# 马士兵严选管理平台 +# 马士兵管理平台模板 ## 技术架构 @@ -108,7 +108,7 @@ - 参考 src/styles/gobalVariables.module.less，颜色、字号、边距、圆角尽可能复用已有的变量 - 没有特殊需求不允许写全局样式，stlye 标签必须加 scoped -- 深度选择器使用 :deep(<selector>){} 语法，>>> 、/deep/、::v-deep 都已弃用 +- 深度选择器使用 :deep(<selector>){} 语法，>>> 、/deep/、v-deep:都已弃用 - 没有特殊需求不允许定义或使用 ID 选择器、属性选择器 ### 分支管理 @@ -141,3 +141,140 @@ | perf | 性能、体验、逻辑优化 | pref: 路由模块解析性能 | | conf | 配置更新 | conf: 项目 base 路径 | | chore | 其他 | chore: 其他 | + +## 心得总结 + +### prettier + +> 统一代码格式 + +安装依赖 + +``` +npm install --save-dev prettier +``` + +安装 VS Code 插件 prettier + +> 新建工作区设置文件 .vscode/settings.json +> 设置保存代码时自动格式化 +> 自动解决 eslint 代码格式问题 +> 设置个文件类型默认格式化工具 + +``` +{ + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll": true, + "source.organizeImports": true + }, + "[vue]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[json]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[jsx]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[jsonc]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "vetur.format.defaultFormatter.html": "prettier", +} +``` + +### commitlint + +> 提供 commit message 校验功能 + +安装依赖 + +``` +npm install --save-dev @commitlint/config-conventional @commitlint/cli +``` + +编写配置 + +> 在项目根目录下创建 commitlint.config.js 或者 .commitlintrc.js +> 并在其中定义好可以使用前缀，如果格式不符将报错并导致提交失败 + +``` +module.exports = { + extends: ['@commitlint/config-conventional'], + rules: { + 'type-enum': [ + 2, + 'always', + ['feat', 'fix', 'doc', 'style', 'refactor', 'test', 'revert', 'build', 'merge', 'perf', 'conf', 'chore'], + ], + 'type-case': [0], + 'type-empty': [0], + 'scope-empty': [0], + 'scope-case': [0], + 'subject-full-stop': [0, 'never'], + 'subject-case': [0, 'never'], + 'header-max-length': [0, 'always', 72], + }, +}; + +``` + +提交代码 + +``` +git commit -m "feat: xxx" +``` + +> 注意要使用英文冒号，冒号后面跟空格 + +### HUSKY + +> 可以对 git hooks 进行管理 + +安装依赖 + +``` +npm install -D husky +``` + +在 package.json 中添加脚本 + +``` +{ + //... + "scripts": { + //... + "prepare": "husky install" + } + //... +} +``` + +> prepare 脚本会在 npm install（不带参数）之后自动执行。也就是说当我们执行 npm install 安装完项目依赖后会执行 husky install 命令，该命令会创建.husky/目录并指定该目录为 git hooks 所在的目录。 + +添加 git hooks + +``` +npx husky add .husky/pre-commit "npx lint-staged" +``` + +> 运行完该命令后我们会看到 .husky/ 目录下新增了一个名为 pre-commit 的 shell 脚本。 +> 也就是说在在执行 git commit 命令时会先执行 pre-commit 这个脚本。 +> 这个脚本的功能是运行 lint-staged 检查待提交的代码规范约束。 +> 不能直接写 lint-staged，会报错找不到命令，npm run lint-staged 也可以不过需要在 package.json 中添加 lint-staged 这个命令，所以使用 npx lint-staged。 + +``` +npx husky add .husky/commit-msg 'npx commitlint --edit "$1"' +``` + +> 运行完该命令后我们会看到 .husky/ 目录下新增了一个名为 commit-msg 的 shell 脚本。 +> 也就是说在在执行 git commit 命令时会执行 commit-msg 这个脚本。 +> 这个脚本的功能是运行 commitlint 检查 git commit 的 message 格式规范。 +> 同 lint-staged 需要使用 npx 来运行命令，$1 代表开发者提交代码时输入的 commit message，老版本husky中使用$HUSKY_GIT_PARAMS 来表示，已弃用 diff --git a/TODO.md b/TODO.md index 0213683..e7786c9 100644 --- a/TODO.md +++ b/TODO.md @@ -1,3 +1,4 @@ -| 问题描述 | 作者 | 记录时间 | 状态 | 解决时间 | 解决方法 | -| ------------------------------------------------------------- | ---- | --------- | -------- | --------- | ------------------------------------------------------------------------------ | -| perttier 保存时不会自动格式化属性排序、需要执行命令才能格式化 | xwk | 2022.3.23 | _已解决_ | 2022.3.24 | .vscode/settings.json 配置 "editor.codeActionsOnSave": {"source.fixAll": true} | +| 问题描述 | 作者 | 记录时间 | 状态 | 解决方法 | +| ----------------------------------------------------------------------------------------------- | ---- | --------- | -------- | ------------------------------------------------------------------------------ | +| perttier 保存时不会自动格式化属性排序、需要执行命令才能格式化 | xwk | 2022.3.23 | _已解决_ | .vscode/settings.json 配置 "editor.codeActionsOnSave": {"source.fixAll": true} | +| [Vue Router warn]: Unexpected error when starting the router: SyntaxError: Unexpected token '<' | xwk | 20223.26 | _已解决_ | script 中使用了 jsx 语法但是 lang 没有定义为 jsx 或者 tsx | diff --git a/src/App.vue b/src/App.vue index 0d7fd72..d388e56 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,7 +14,7 @@ import zh from 'element-plus/lib/locale/lang/zh-cn'; const config = reactive({ locale: zh, - size: 'default', + size: '', zIndex: 300, button: { autoInsertSpace: true, diff --git a/src/styles/base.less b/src/styles/base.less index 2d39849..ce7068e 100644 --- a/src/styles/base.less +++ b/src/styles/base.less @@ -9,6 +9,8 @@ body, ul, ol { list-style: none; + margin: 0; + padding: 0; } *:not([class^='el-']) { margin: 0;