conf: 全局配置

.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],
     },
 };

.eslintrc.js

@@ -106,5 +106,6 @@ module.exports = {
         defineProps: true,
         defineEmits: true,
         defineExpose: true,
+        resolveDynamicComponent: true,
     },
 };

.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

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 来表示，已弃用

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                      |

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,

src/styles/base.less

@@ -9,6 +9,8 @@ body,
 ul,
 ol {
     list-style: none;
+    margin: 0;
+    padding: 0;
 }
 *:not([class^='el-']) {
     margin: 0;