137 字 1 分钟

# vscode 保存自动格式化 在.vscode 下新建 settings.json { "editor.codeActionsOnSave": { "source.fixAll": "explicit" }}之后每次文件有修改，保存时，都会自动格式化。
1.1k 字 1 分钟

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

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

1.4k 字 1 分钟

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

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

5.1k 字 5 分钟

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 的整合使用，确保代码质量和提交信息的标准化。

982 字 1 分钟

# 跨域原理

浏览器同源策略：协议、域名和端口都相同是同源，浏览器会限制非同源请求读取响应结果。

本地开发环境通过 Vite 配置反向代理解决浏览器跨域问题，生产环境则是通过 nginx 配置反向代理 。

5.9k 字 5 分钟

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

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

5.6k 字 5 分钟

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

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

914 字 1 分钟

# 1. 分包

修改 vite.config.ts

  • 通过 () => import() 形式加载的组件会自动分包
  • 第三方插件需手动分包
build: {
    rollupOptions: {
        output: {
            manualChunks: {
                vue: ['vue', 'pinia', 'vue-router'],
                elementIcons: ['@element-plus/icons-vue'],
            },
        },
    },
}

4.1k 字 4 分钟

特点:

  • 完整的 ts 支持
  • 三大核心：state（存储的值），getters（计算属性），actions 也可支持同步（改变值的方法，支持同步和异步）
  • 与 vuex 相比，去除了 mutations（actions 也可支持同步）和 modules（只有 store 之间的互相引用）