我使用的是WebStorm來(lái)新建Vue項(xiàng)目:
新建Vue項(xiàng)目
選擇項(xiàng)都選擇默認(rèn)就行把敞,最后新項(xiàng)目目錄如下圖所示:
新Vue項(xiàng)目目錄
點(diǎn)擊上圖中紅色框選出的"Terminal"打開(kāi)終端
執(zhí)行 “npm instal element-ui --save” 將Element-UI依賴添加到項(xiàng)目中去
整合Element-UI
想知道是否添加成功,可以進(jìn)入“package.json”文件查看是否有element-ui版本信息
確認(rèn)已整合Element-UI至項(xiàng)目
最后進(jìn)入“main.js"文件中俺夕,添加以下代碼方可使用Element-UI:
import ElementUI?from?'element-ui'
import?'element-ui/lib/theme-default/index.css'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
刪除掉的“element-ui/lib/theme-default/index.css”是老版本Element-UI的引入路徑,已經(jīng)失效;新的路徑是下面的“element-ui/lib/theme-chalk/index.css”
main.js引入Element-UI
在新項(xiàng)目自動(dòng)生成的HelloWorld.vue中使用Element-UI新建一個(gè)<el-button>,并新建一個(gè)普通<button>做對(duì)比牲平;
.vue文件引入Element-UI以做驗(yàn)證
進(jìn)入 “Terminal” 執(zhí)行 “npm run start” 啟動(dòng)項(xiàng)目
運(yùn)行項(xiàng)目
出現(xiàn)如下效果表明整合Element-UI成功
整合成功
下次再見(jiàn)咯~~~