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逻辑中使用组件名称方法还是需要单独引入的