Vue3中正確使用ElementPlus的示例代碼

更新時間：2023年01月18日 15:12:02 作者：于弋gg

這篇文章主要介紹了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配件了