ElementUI的官方網(wǎng)址 https://element.eleme.cn/#/zh-CN/ 它是一套基于Vue2.0的桌面端組件庫(kù)
1.基于命令行方式手動(dòng)安裝
1)安裝依賴包
cnpm i element-ui -S
2)導(dǎo)入相關(guān)資源
在main.js文件中引入資源

3)使用
在官網(wǎng)選擇使用的組件,以按鈕為例,拷貝代碼到App.vue


保存運(yùn)行,看到按鈕樣式已經(jīng)生效

2.基于圖形化界面自動(dòng)安裝
1)輸入指令啟動(dòng)圖形化界面
vue ui
創(chuàng)建一個(gè)新項(xiàng)目,具體操作可見之前發(fā)表的文章《快速創(chuàng)建vue項(xiàng)目的兩種方法》,創(chuàng)建完成點(diǎn)擊任務(wù)->serve->啟動(dòng),圖中已經(jīng)啟動(dòng)好項(xiàng)目

2)點(diǎn)擊插件->添加插件

輸入插件名稱搜索

單擊選中安裝

3)安裝好后進(jìn)行相關(guān)配置,由于全部導(dǎo)入會(huì)導(dǎo)致項(xiàng)目體積過大,這里選擇按需導(dǎo)入

到此完成安裝,在插件欄中可以看見插件已安裝

4)使用
VSCode打開項(xiàng)目文件,發(fā)現(xiàn)在main.js中多了一行代碼,導(dǎo)入了element-ui插件

打開plugins->element.js,可以看到按需導(dǎo)入Button組件,并注冊(cè)為Vue的組件文件,接下來(lái)就可以在任意組件中使用Button

在App.vue中寫入代碼,運(yùn)行項(xiàng)目,在瀏覽器中可以看見按鈕生效


好記性不如爛筆頭,總結(jié)和記錄工作學(xué)習(xí)中的點(diǎn)點(diǎn)滴滴,如有不對(duì)之處還請(qǐng)指教。