如何在 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