1. vite 构建工具
是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源
1.1 Vite生产环境为什么选择Rollup做构建工具
Rollup是基于ES6的JavaScript打包工具。
它将小文件打包成一个大文件或者更复杂的库和应用，打包既可用于浏览器和Node.js使用。
Rollup最显著的地方就是能让打包文件体积很小。
相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。
因为Rollup基于ES6模块，比Webpack和Browserify使用的CommonJS模块机制更高效。
1.2 优点
- 因为没有打包工作要做，所以服务器冷启动非常快【快速的冷启动】
- 代码是按需编译的，因此只有在当前页面上实际导入的代码才会编译，不必等到整个应用程序打包后才开始开发，这对于有几十个页面的应用程序来说是一个很大的不同【真正按需编译】
- 热模块更新（HMR）的性能与模块总数解耦，这使得无论应用程序有多大，HMR都能保持快速【即时热模块更新】
2. 下载使用 vite
yarn create -g vite // 下载 vite
yarn // 安装依赖
yarn dev // 启动项目
创建完的项目结构是这样的：
vite.config.js
package.json
2.1 安装所需依赖
- 安装 vue-router
yarn add vue-router - 引入 element-plus 组件库
yarn add element-plus - 下载vuex
yarn add vuex - 安装axios
yarn add axios - 安装 js-cookie
yarn add js-cookie - 安装 sass 【mac 可以直接安装】
如下图或者
yarn add sass-loader,yarn add node-sass,yarn add sass
安装失败参考：blog.csdn.net/qq_42144899… - 安装 style-resources-loader 【导入css 预处理器的一些公共的样式文件变量， 配置全局样式】
yarn add style-resources-loader - 安装 vue-cli-plugin-style-resources-loader 【配置全局样式】
yarn add vue-cli-plugin-style-resources-loader
2.2 配置主题色
// 可以在 [`packages/theme-chalk/src/common/var.scss`](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss).文件中查找SCSS变量
// 按需导入，重写自己所需样式，覆盖原样式（使用scss）
// element-variables.scss 文件名
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
"primary": (
"base": #F37021,
),
"success": (
"base": #67c23a,
),
"warning": (
"base": #e6a23c,
),
"danger": (
"base": #f56c6c,
),
"info": (
"base": #909399,
),
),
$text-color: (
'primary': red,
'regular': #606266,
'secondary': #909399,
'placeholder': #c0c4cc,
),
$border-radius: (
'base': 4px,
'small': 2px,
'round': 20px,
'circle': 100%,
),
);
// 如果你正在使用vite，并且你想在按需导入时自定义主题。
// 使用 `scss.additionalData` 来编译所有应用 scss 变量的组件。
css: {
preprocessorOptions: {
scss: {
additionalData: "@import './src/styles/element-variables.scss';"
},
},
},
2.3 代码分析
在开发期间 Vite 是一个服务器，index.html 是该 Vite 项目的入口文件
关键变化是 index.html 中的文件导入方式
这样main.js中就可以使用ES6 Module方式组织代码
浏览器会自动加载这些导入，vite会启动一个本地服务器处理不同这些加载请求，对于相对地址的导入，要根据后缀名处理文件内容并返回，对于裸模块导入要修改它的路径为相对地址并再次请求处理。
再根据模块package.json中的入口文件选项获取要加载的文件。
