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

2021 年 1 月 15 日
筆記
element-ui, VUE, 前端

在上篇文章《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 都已經完美支援，可以在新項目里嘗試用起來了。

項目源程式碼可以參考：//github.com/element-plus/element-plus-vite-starter

Tags: element-ui VUE 前端