2021新年 Vue3.0 + Element UI 嚐鮮小記

2021年，又是新的一年，Vue 已經發布 3.0 版本，最好用的 UI 組件庫 Element UI 也發佈了適配 Vue3.0 的新版本，是時候開始學習一下這兩個新技術。

本文主要記錄了使用 Vue CLI 來完成項目搭建的過程。

安裝升級最新的 Vue CLI 4.x

npm install -g @vue/cli
複製代碼

輸入vue -V (大寫的V) 查看版本 @vue/cli 4.5.9，必定要安裝新版，否則使用不了 Vue 3。

建立 Vue 3.0 版本的項目

如圖，使用 vue create my-app 建立項目，會有以下提示，選擇中間項能夠直接建立3.0的項目，選擇最後一項，能夠手動選擇建立2.0或者3.0版本和其餘配置項。

項目引入 Element Plus

Element UI 也發佈了對應 Vue 3.0 的升級版本 Element Plus github.com/element-plu… 使用 Vue CLI 能夠一鍵引入進來

cd my-app
vue add element-plus
npm run serve
複製代碼

一路回車確認，Element Plus 就自動添加到項目裏了。這樣，使用了 Vue 3.0 + Element Plus 組件庫的項目就完成搭建。

學習 Vue 3.0 入口文件的變化

打開生成的項目學習一下，相對於2.0版本的引入略有不一樣，3.0 使用 createApp(App) 建立Vue的實例，而後使用熟悉的use，進行引入 Element UI 組件庫。

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')
複製代碼

項目代碼分享

github.com/element-plu…

2021 新的一年，也要好好學習 Vue 3.0 和 Element UI 呀。