新建vue項(xiàng)目
安裝Vue3及腳手架
使用命令npm install vue@next及npm install -g @vue/cli分別下載vue及其命令行工具目胡。使用命令vue --version查看版本如下圖，表示安裝完成。
查看版本
新建項(xiàng)目
創(chuàng)建項(xiàng)目：vue create 項(xiàng)目名稱
選擇選項(xiàng)：Manually select features
選項(xiàng)
根據(jù)自己項(xiàng)目需求選擇相應(yīng)的選項(xiàng),使用空格進(jìn)行選擇
- babel---轉(zhuǎn)碼
- typescript---ts
- Progressive Web App (PWA) Support---支持漸進(jìn)式Web應(yīng)用程序（PWA）
- router---vue-router
- vuex---vuex
- CSS Pre-processors---css預(yù)處理
- Linter / Formatter---代碼風(fēng)格檢查和格式化
- Unit Testing---單元測試
-
E2E Testing---e2e測試
選中表示支持,回車。
根據(jù)提示選擇自己需要的配置众弓，命令行工具會(huì)自動(dòng)根據(jù)你的需要下載好相關(guān)依賴并搭建好初始項(xiàng)目脚草。
創(chuàng)建成功
按照提示的命令運(yùn)行項(xiàng)目，可以看見項(xiàng)目已經(jīng)成功啟動(dòng)仙畦。
成功啟動(dòng)
之后，在此基礎(chǔ)項(xiàng)目上添磚加瓦即可输枯。
安裝ElementPlus
npm install element-plus --save
說明
使用--save-dev簡寫為-D的插件是被寫入到devDependencies對象里面议泵。里面的插件只用于開發(fā)環(huán)境，不用于生產(chǎn)環(huán)境桃熄。
使用--save簡寫為-S的插件是則被寫入到dependencies對象里面先口。是需要發(fā)布到生產(chǎn)環(huán)境的型奥。
引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).use(store).use(router).mount("#app");
接下來就可使用ElementPlus中的各類組件了。
Tips
項(xiàng)目中若有l(wèi)ess文件且運(yùn)行時(shí)出現(xiàn)如下錯(cuò)誤：
Syntax Error: TypeError: this.getOptions is not a function
應(yīng)該是less版本過高碉京，安裝較低版本的less和less-loader即可解決厢汹。
