如何在 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，真香。

引入 Element Plus UI 组件库

开发项目，首先要挑选一个 UI 组件库。目前市面上支持 Vue 3 的组件库并很少，Element UI 不负众望已经完成支持了。Element Plus 是饿了么 Element UI 团队推出的适配了 Vue 3 的全新版本，新增了不少实用组件，体验很是好。

Vite 工程引入 Element Plus 的方法也很简单，首先安装

npm i element-plus

而后修改项目入口文件，引入 Element Plus 库和相关样式文件

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')

从新启动项目，就能够愉快的使用 Element Plus 了。如今咱们再来体验一下即时热更新功能，修改一下 App.vue 文件，新增一个 Button

<el-button type="primary"> Element UI </el-button>

保存文件，几乎同一时间，浏览器项目预览就完成了更新，热更新时间几乎能够忽略不计。

小结

Vite 使用了最新浏览器的特性，给咱们带来了更好的开发体验。目前的相关生态如 Element UI 都已经完美支持，能够在新项目里尝试用起来了。

项目源代码能够参考：https://github.com/element-plus/element-plus-vite-starter