element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
更新時(shí)間：2022年08月16日 10:37:47 作者：顏值與實(shí)力并存源
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
vue3.0 不兼容 element-ui ，于是推出了element-plus
1.安裝element-plus （3種方式 ）
npm install element-plus --save (推薦)
yarn add element-plus
pnpm install element-plus
2. 在main.js種引用
import 'element-plus/theme-chalk/index.css' //默認(rèn)css樣式 英文
import Element from 'element-plus' //引入插件
import zhCn from 'element-plus/es/locale/lang/zh-cn' //引入中文包
//全局 使用element-plus
//中文使用
createApp(App).use(Element,{locale:zhCn}).mount('#app')
//默認(rèn)英文使用
createApp(App).use(Element).mount('#app')引入最重要看官方引入方法
官方引入方法：
https://element-plus.org/es-ES/guide/quickstart.html#configuracion-global
正常引入不生效的原因如下
原因一
main.js中加載順序不對
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')原因二
<el-tree
ref="elTreeRef"
:data="menus"
show-checkbox
node-key="id"
:props="{ children: 'children', label: 'name' }"
@check="handleCheckChange"
>
import { ElTree } from 'element-plus'
const elTreeRef = ref<InstanceType<typeof ElTree>>()
const editCallback = (item: any) => {
const leafKeys = menuMapLeafKeys(item.menuList)
nextTick(() => {
console.log(elTreeRef.value)
elTreeRef.value?.setCheckedKeys(leafKeys, false)
})
}
有的時(shí)候全局注冊，但是不生效的原因，只能在template中可以使用，在js邏輯中使用組件名稱方法還是需要單獨(dú)引入的
到此這篇關(guān)于element-plus 在vue3 中不生效的原因解決方法(element-plus引入)的文章就介紹到這了,更多相關(guān)element-plus vue3 不生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于webpack-dev-server配置代理解決前端開發(fā)中的跨域問題
這篇文章主要介紹了關(guān)于webpack-dev-server配置代理解決前端開發(fā)中的跨域問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
基于vue-cli搭建多模塊且各模塊獨(dú)立打包的項(xiàng)目
這篇文章主要介紹了基于vue-cli搭建多模塊且各模塊獨(dú)立打包的項(xiàng)目,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
vue實(shí)現(xiàn)壓縮圖片預(yù)覽并上傳功能（promise封裝）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)壓縮圖片預(yù)覽并上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
vue實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果(示例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
這篇文章主要給大家分享的是Vue 組件化基本使用，所謂組件化，就是把頁面拆分成多個(gè)組件，每個(gè)組件依賴的 CSS、JS、模板、圖片等資源放在一起開發(fā)和維護(hù)。 因?yàn)榻M件是資源獨(dú)立的，所以組件在系統(tǒng)內(nèi)部可復(fù)用，組件和組件之間可以嵌套，下面來看文章學(xué)習(xí)內(nèi)容吧2021-10-10
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)簡易時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認(rèn)行為、靈活性、多模型綁定和使用場景,感興趣的朋友一起看看吧2025-02-02
今天小編就為大家分享一篇vue 中滾動條始終定位在底部的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式
這篇文章主要介紹了vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要給大家介紹了關(guān)于Vue攔截器原理以及詳細(xì)使用的相關(guān)資料,Vue攔截器通常用于在發(fā)送請求或響應(yīng)數(shù)據(jù)時(shí)對其進(jìn)行一些處理或修改,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08