137 字 1 分钟

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

国际化分为两个部分：

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

982 字 1 分钟

# 跨域原理

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

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

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'],
            },
        },
    },
}

1.6k 字 1 分钟

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

参考：Pinia 官方文档

4.1k 字 4 分钟

特点:

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

5.9k 字 5 分钟

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

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

1.1k 字 1 分钟

一款 CSS 预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。