在vue項(xiàng)目中使用ElementUI的兩種方法

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)指教。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容