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 https://github.com/element-plus/element-plus 使用 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')

項目代碼分享

https://github.com/element-plus/element-plus-starter

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