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)

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 呀。