element-plus 在vue3 中不生效的原因解决方法(element-plus引入)
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' //默认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')
//默认英文使用
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)
})
}
有的时候全局注册,但是不生效的原因,只能在template中可以使用,在js逻辑中使用组件名称方法还是需要单独引入的
到此这篇关于element-plus 在vue3 中不生效的原因解决方法(element-plus引入)的文章就介绍到这了,更多相关element-plus vue3 不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
关于webpack-dev-server配置代理解决前端开发中的跨域问题
这篇文章主要介绍了关于webpack-dev-server配置代理解决前端开发中的跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vue3组件的v-model:value与v-model的区别解析
在Vue3中,v-model和v-model:value都是用于实现双向数据绑定的语法糖,但v-model:value提供了更显式和灵活的绑定方式,允许你明确指定绑定的属性名和事件名,它们的主要区别在于默认行为、灵活性、多模型绑定和使用场景,感兴趣的朋友一起看看吧2025-02-02


最新评论