如何在 Vite 中使用 Element UI + Vue 3

在上篇文章《2021新年 Vue3.0 + Element UI 尝鲜小记》里，我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目，而 Vue CLI 实际上为我们生成了一个我们熟悉的 Webpack 工程项目。

Webpack 无需过多介绍，一个十分强大的打包工具。但 Webpack 也有不足的地方，比如第一次打包需要很长时间，修改代码之后的热更新速度较慢。

随着 Vue 3 一起推出的还有一个强大的新一代打包工具 Vite, 一个面向现代浏览器，基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具，恰恰就解决了上述 Webpack 的痛点。Vite 主要的优势有三点：

• 快速冷启动服务器
• 即时热模块更换（HMR）
• 真正的按需编译

听上去就很不错，立刻上手尝试一下。

初始化 Vite 项目

使用

npm init @vitejs/app my-vue-app --template vue

命令快速生成一个使用 Vite 构建的 Vue 3 项目模版。
运行 npm run dev 即可把项目跑起来，进入开发模式。项目冷启动速度非常快，不到 1 秒钟，浏览器里就已经出现项目预览了。项目冷启动只用了 382ms，真香。