Vue3中正確使用ElementPlus的示例代碼
一、創(chuàng)建Vue3項目
vue create vue_element
選擇自定義項目創(chuàng)建:

選擇這幾項(空格選擇)

后面的幾項全部回車,這里就不做介紹了,大膽回車就行,出了事算我的,除非你有特殊需求。(下面是安裝成功后的圖片)

二、進入項目,安裝Element-Plus
(1)我這里用的是WebStorm,在命令行中執(zhí)行下面代碼安卓Element-Plus:
npm install element-plus --save

(2) 在main中配置Element-Plus:
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(router).use(ElementPlus).mount('#app')
到這里,Element-Plus里面的控件你都可以使用了。
后面講介紹,如何使用ElementPlus中的Icon控件的配置。
三、配置Icon
(1)在終端執(zhí)行下面代碼進行安裝:
npm install @element-plus/icons-vue
(2)在main中進行配置
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(router).use(ElementPlus).mount('#app')這樣就可以使用所有ElementPlus配件了
四、測試運行
(1) 配置一個編譯器

(2) 隨便找一個ElementPlus用一下子看看。
拿他試一下,直接把代碼復制到你的Vue就可以。

結(jié)果:

五、Git提交一下
總是報紅怎么辦?說明提示你修改了沒有提交到git里面。有強迫癥的看一下。


git add . 后再git status看一下子,這樣之后就不報紅,并提交到git上面了,如果你要pull到github上,這里就不演示了,已經(jīng)有點跑題了。

到此這篇關(guān)于Vue3中正確使用ElementPlus的文章就介紹到這了,更多相關(guān)Vue3使用ElementPlus內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Element-UI日期選擇器(選擇日期范圍)禁用未來日期實現(xiàn)代碼
我們在網(wǎng)頁開發(fā)時通常需要用到一些日期組件來方便用戶選擇時間,其中element日期組件是一個非常好用的工具,這篇文章主要給大家介紹了關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來日期的相關(guān)資料,需要的朋友可以參考下2024-02-02
淺談Vue static 靜態(tài)資源路徑 和 style問題
這篇文章主要介紹了淺談Vue static 靜態(tài)資源路徑 和 style問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11

