如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑
一、創(chuàng)建Vue3項(xiàng)目
vue create vue_element
選擇自定義項(xiàng)目創(chuàng)建：
選擇這幾項(xiàng)（空格選擇）
后面的幾項(xiàng)全部回車(chē)，這里就不做介紹了，大膽回車(chē)就行，出了事算我的，除非你有特殊需求。
（下面是安裝成功后的圖片）
二、進(jìn)入項(xiàng)目,安裝Element-Plus
（1）我這里用的是WebStorm，在命令行中執(zhí)行下面代碼安卓Element-Plus：
npm install element-plus --save
（2） 在main中配置Element-Plus：
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
createApp(App).use(store).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)跑題了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- Vue3+Vite+ElementPlus構(gòu)建學(xué)習(xí)筆記
- Vue3通過(guò)JSON渲染ElementPlus表單的流程步驟
- Vue3+ElementPlus封裝圖片空間組件的門(mén)面實(shí)例
- vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill詳細(xì)教程
- vue3基于elementplus 簡(jiǎn)單實(shí)現(xiàn)表格二次封裝過(guò)程
- vue3+elementplus 樹(shù)節(jié)點(diǎn)過(guò)濾功能實(shí)現(xiàn)
- vue3+elementplus前端生成圖片驗(yàn)證碼完整代碼舉例
- Vue3 + ElementPlus動(dòng)態(tài)合并數(shù)據(jù)相同的單元格的完整代碼
相關(guān)文章
vue-cli點(diǎn)擊實(shí)現(xiàn)全屏功能
這篇文章主要為大家詳細(xì)介紹了vue-cli點(diǎn)擊實(shí)現(xiàn)全屏功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
最近在學(xué)習(xí)axios，然后項(xiàng)目就用到了，所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新的相關(guān)資料，文中先對(duì)axios進(jìn)行了簡(jiǎn)單的介紹，方法大家理解學(xué)習(xí)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
vue實(shí)現(xiàn)一個(gè)矩形標(biāo)記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)矩形標(biāo)記區(qū)域 rectangle marker的方法，幫助大家實(shí)現(xiàn)區(qū)域標(biāo)記功能，感興趣的朋友可以了解下2020-10-10
vue watch監(jiān)聽(tīng)取不到this指向的數(shù)問(wèn)題
這篇文章主要介紹了vue watch監(jiān)聽(tīng)取不到this指向的數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
虛擬列表是一種優(yōu)化長(zhǎng)列表渲染的技術(shù),它可以在保持流暢性的同時(shí),渲染大量的數(shù)據(jù),本文主要介紹了如何使用vue手寫(xiě)一個(gè)虛擬列表,感興趣的可以了解下2024-04-04
vue項(xiàng)目如何引入json數(shù)據(jù)
這篇文章主要介紹了vue項(xiàng)目如何引入json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解vue項(xiàng)目?jī)?yōu)化之按需加載組件-使用webpack require.ensure
本篇文章主要介紹了詳解vue項(xiàng)目?jī)?yōu)化之按需加載組件-使用webpack require.ensure，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解
今天小編就為大家分享一篇vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了淺談Vue.set實(shí)際上是什么，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫(huà)
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫(huà)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04