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)目,具體操作可見(jiàn)之前發(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)目體積過(guò)大,這里選擇按需導(dǎo)入
到此完成安裝谆扎,在插件欄中可以看見(jiàn)插件已安裝
4)使用
VSCode打開(kāi)項(xiàng)目文件,發(fā)現(xiàn)在main.js中多了一行代碼芹助,導(dǎo)入了element-ui插件
打開(kāi)plugins->element.js堂湖,可以看到按需導(dǎo)入Button組件,并注冊(cè)為Vue的組件文件状土,接下來(lái)就可以在任意組件中使用Button
在App.vue中寫入代碼无蜂,運(yùn)行項(xiàng)目,在瀏覽器中可以看見(jiàn)按鈕生效
好記性不如爛筆頭蒙谓,總結(jié)和記錄工作學(xué)習(xí)中的點(diǎn)點(diǎn)滴滴斥季,如有不對(duì)之處還請(qǐng)指教。