Vue3中正確使用ElementPlus的示例代碼
一、創(chuàng)建Vue3項(xiàng)目
vue create vue_element
選擇自定義項(xiàng)目創(chuàng)建：
選擇這幾項(xiàng)（空格選擇）
后面的幾項(xiàng)全部回車，這里就不做介紹了，大膽回車就行，出了事算我的，除非你有特殊需求。（下面是安裝成功后的圖片）
二、進(jìn)入項(xià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í)行下面代碼進(jìn)行安裝：
npm install @element-plus/icons-vue
（2）在main中進(jìn)行配置
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配件了
四、測(cè)試運(yùn)行
（1） 配置一個(gè)編譯器
(2) 隨便找一個(gè)ElementPlus用一下子看看。
拿他試一下，直接把代碼復(fù)制到你的Vue就可以。
結(jié)果：
五、Git提交一下
總是報(bào)紅怎么辦？說(shuō)明提示你修改了沒(méi)有提交到git里面。有強(qiáng)迫癥的看一下。
git add . 后再git status看一下子，這樣之后就不報(bào)紅，并提交到git上面了，如果你要pull到github上，這里就不演示了，已經(jīng)有點(diǎn)跑題了。
到此這篇關(guān)于Vue3中正確使用ElementPlus的文章就介紹到這了,更多相關(guān)Vue3使用ElementPlus內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue通過(guò)provide & inject兩個(gè)關(guān)鍵字完成父組件向子孫組件直接傳值，很像子類能夠使用父類的屬性一樣方便。provide & inject一般用于多層之間的傳值，兩層之間還是使用props進(jìn)行2021-10-10
這篇文章主要介紹了vue使用canvas手寫輸入識(shí)別中文，工作時(shí)遇到一些項(xiàng)目如：系統(tǒng)上的輸入法使用不方便，客戶要求做一個(gè)嵌入web網(wǎng)頁(yè)的手寫輸入法。下面我們來(lái)看看文章得具體描述吧2021-11-11
vue3?中的toRef函數(shù)和toRefs函數(shù)的基本使用
這篇文章主要介紹了vue3?toRef函數(shù)和toRefs函數(shù),文中介紹了ref和toRef的區(qū)別，ref本質(zhì)是拷貝，修改響應(yīng)式數(shù)據(jù)不會(huì)影響原始數(shù)據(jù)，toRef的本質(zhì)是引用關(guān)系，修改響應(yīng)式數(shù)據(jù)會(huì)影響原始數(shù)據(jù)，需要的朋友可以參考下2022-11-11
vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式
這篇文章主要介紹了vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue2路由基本用法,結(jié)合實(shí)例形式分析了vue2路由基本功能、原理、用法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
本篇文章主要介紹了詳解vue.js之綁定class和style的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了vue-router 路由基礎(chǔ)的詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
這篇文章主要為大家介紹了vue組合式API淺顯入門示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
VUE實(shí)現(xiàn)表單元素雙向綁定（總結(jié)）
本篇文章主要介紹了VUE實(shí)現(xiàn)表單元素雙向綁定（總結(jié)） ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09