配置 husky、lint-staged、@commitlint/cli

• husky：一个为git客户端增加hook的工具
• lint-staged：仅对Git 代码暂存区文件进行处理，配合husky使用
• @commitlint/cli：让commit信息规范化

Git提交规范进阶

• Husky + Lint-staged 整合实现 Git 提交前代码规范检测/格式化；
• Husky + Commitlint + Commitizen + cz-git 整合实现生成规范化且高度自定义的 Git commit message。

本文介绍通过 Husky + Lint-staged + Commitlint + Commitizen + cz-git 来配置 Git 提交代码规范。

通过Husky、Lint-staged、Commitlint、Commitizen和cz-git来设置Git提交前的代码规范检测和自动生成规范化Git commit message。这个流程包括了pre-commit和commit-msg钩子的配置，以及ESlint、Prettier和Stylelint的整合使用，确保代码质量和提交信息的标准化。

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)，以下就通过自定义指令的方式实现按钮权限控制。

参考：Vue 官方文档-自定义指令

• Eslint： JavaScript 语法规则和代码风格检查；
• Prettier：全局代码格式化；
• Stylelint: CSS 统一规范和代码检测。

eslint9.x，与以往版本的配置写法不同

1. 分包

修改vite.config.ts

• 通过() => import()形式加载的组件会自动分包
• 第三方插件需手动分包

build: {
    rollupOptions: {
        output: {
            manualChunks: {
                vue: ['vue', 'pinia', 'vue-router'],
                elementIcons: ['@element-plus/icons-vue'],
            },
        },
    },
}

国际化分为两个部分：

• Element Plus 框架国际化（官方提供了国际化方式）
• 自定义国际化（通过 vue-i18n 国际化插件）

通过ESLint 检测 JS/TS 代码、Prettier格式化代码、Stylelint 检测 CSS/SCSS 代码和配置 EditorConfig 来全方位约束和统一前端代码规范。

• Eslint： JavaScript 语法规则和代码风格检查；
• Prettier：全局代码格式化。
• Stylelint: CSS 统一规范和代码检测；

Axios 基于promise可以用于浏览器和node.js的网络请求库

参考： Axios 官方文档

参考官网： element plus 按需自动导入

前提：需要完成 自动导入 的安装和配置，参考：vite配置-自动导入