982 字 1 分钟

# 跨域原理

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

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

3k 字 3 分钟

国际化分为两个部分：

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

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 之间的互相引用）

1.1k 字 1 分钟

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

1.6k 字 1 分钟

通过 vite-plugin-svg-icons 插件整合 Iconfont 第三方图标库实现本地图标

参考： vite-plugin-svg-icons 安装文档

2.6k 字 2 分钟

Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。