element-plus 在vue3 中不生效的原因解决方法(element-plus引入)

 更新时间:2022年08月16日 10:37:47   作者:颜值与实力并存源  
这篇文章主要介绍了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 不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vuex的基本概念、项目搭建以及入坑点

    Vuex的基本概念、项目搭建以及入坑点

    Vuex是一个专门为Vue.js应用程序开发的状态管理模式,这篇文章主要介绍了Vuex的基本概念、项目搭建以及入坑点,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Vue3中多个弹窗同时出现的解决思路

    Vue3中多个弹窗同时出现的解决思路

    这篇文章主要介绍了Vue3中多个弹窗同时出现的解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue实现过渡动画Message消息提示组件示例详解

    vue实现过渡动画Message消息提示组件示例详解

    这篇文章主要为大家介绍了vue实现过渡动画Message消息提示组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 利用Vue实现卡牌翻转的特效

    利用Vue实现卡牌翻转的特效

    这篇文章主要介绍了如何利用Vue实现一个春节抽福卡页面,采用了卡牌翻转的形式。文中的实现方法讲解详细,快跟随小编一起学习一下吧
    2022-02-02
  • Windows系统下使用nginx部署vue2项目的全过程

    Windows系统下使用nginx部署vue2项目的全过程

    nginx是一个高性能的HTTP和反向代理服务器,因此常用来做静态资源服务器和后端的反向代理服务器,下面这篇文章主要给大家介绍了关于Windows系统下使用nginx部署vue2项目的相关资料,需要的朋友可以参考下
    2023-03-03
  • vue项目做屏幕自适应处理方式

    vue项目做屏幕自适应处理方式

    这篇文章主要介绍了vue项目做屏幕自适应处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue 全局环境切换问题

    vue 全局环境切换问题

    小编在开发使经常会碰到全局切换问题,今天小编给大家带来一篇教程给大家介绍vue 全局环境切换问题,感兴趣的朋友一起看看吧
    2019-10-10
  • Vue2实现图片的拖拽,缩放和旋转效果的示例代码

    Vue2实现图片的拖拽,缩放和旋转效果的示例代码

    这篇文章主要为大家介绍了如何基于vue2 实现图片的拖拽、旋转、鼠标滚动放大缩小等功能。文中的示例代码讲解详细,感兴趣的小伙伴可以尝试一下
    2022-11-11
  • vue在取对象长度length时候出现undefined的解决

    vue在取对象长度length时候出现undefined的解决

    这篇文章主要介绍了vue在取对象长度length时候出现undefined的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue prop属性传值与传引用示例

    vue prop属性传值与传引用示例

    今天小编就为大家分享一篇vue prop属性传值与传引用示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论