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

目录
  • 1.安装element-plus （3种方式 ）
  • 2. 在main.js种引用
    • 原因一
    • 原因二

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 不生效内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3使用element-plus搭建后台管理系统之菜单管理功能

    vue3使用element-plus搭建后台管理系统之菜单管理功能

    菜单管理是一套系统中最常见最核心的系统管理模块之一,我把菜单管理分成了2个部分,左边可以管理维护菜单,在菜单的最右侧可以维护每个菜单按钮权限配置 使用element-plus el-tree组件快速开发树形菜单结构,el-tree组件中filter-node-method事件便可以实现树形菜单筛选过滤功能 <template> <div class="common-tree"> <el-tree :ref="treeRef" :data

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • Vue3.x中使用element-plus的各种方式详解

    Vue3.x中使用element-plus的各种方式详解

    目录 安装element-plus 方式一.全局引入element-plus 方式二.单个组件中使用 方式三.经过自己封装按需引入 1.在项目的src目录下建一个文件夹 global 2.register-element.ts代码如下 3.index.ts代码如下 4.main.ts中引入 安装element-plus element-plus // NPM  npm install element-plus --save // Yarn  yarn add element-plus // pn

  • vue3中update:modelValue的使用与不生效问题解决

    目录 v-model中update:modelValue 写法: 使用: vue3子组件update:modelValue不生效问题 总结 v-model中update:modelValue v-model的主要原因是由于value和input事件可能另有它用,那么我们可不可以直接使用另外的属性和方法,而不需要去通过model进行定义. vue3中就实现了这个功能,v-model绑定的不再是value,而是modelValue,接收的方法也不再是input,而是update:modelValue

  • Vue3+Element-Plus实现左侧菜单折叠与展开功能示例

    Vue3+Element-Plus实现左侧菜单折叠与展开功能示例

    目录 1.最终实现的效果图 2.  实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条UI结构,实现折叠与展开功能 2.3  实现点击该DIV时,触发菜单折叠与展开 2.4  折叠与展开功能是实现了,但是背景颜色并没有随着菜单折叠时跟着变小或展开时跟着变大 2.5. 最终效果 3. Home.vue 代码 1.最终实现的效果图 2.  实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条

  • 详解Vue3怎么使用element-plus

    目录 1.安装 2.在main.js引入 3.使用 vue3出来一段时间了,element也更新了版本去兼容vue3,在这里简单的介绍一下如何使用element-plus吧 1.安装 npm install element-plus --save 2.在main.js引入 import { createApp, Vue } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css

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

    目录 1.安装element-plus (3种方式 ) 2. 在main.js种引用 原因一 原因二 vue3.0 不兼容 element-ui ,于是推出了element-plus 1.安装element-plus (3种方式 ) npm install element-plus --save (推荐)yarn add element-pluspnpm install element-plus 2. 在main.js种引用 import 'element-plus/theme-chalk/in

  • vue在index.html中引入静态文件不生效问题及解决方法

    本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html) 出现的原因及解决办法 第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的几个配置文件内的stat

  • Vue3中插槽(slot)的全部使用方法

    Vue3中插槽(slot)的全部使用方法

    目录 什么是插槽 默认内容 具名插槽 动态插槽名 作用域插槽 作用域插槽 具名作用域插槽 写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是它的所有用法你是否全部理解呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码. 比如一个最简单插槽例子: //父组件 <template> <div&g

  • php中unserialize返回false的解决方法

    本文实例讲述了php中unserialize返回false的解决方法,分享给大家供大家参考.具体方法如下: php 提供serialize(序列化) 与unserialize(反序列化)方法. 使用serialize序列化后,再使用unserialize反序列化就可以获取原来的数据. 先来看看如下程序实例: <?php $arr = array( 'name' => 'fdipzone', 'gender' => 'male' ); $str = serialize($arr); //序

  • 关于验证码在IE中不刷新的快速解决方法

    今天在做验证码的时候发现在IE中,验证码不会刷新,而谷歌等其他浏览器没有问题,所以我想到应该是缓存问题,因为IE默认的设置是如果访问地址没变化就不会去获取而是加载缓存中的内容 所以解决方案就是在验证码的切换地址后面加一个随机的参数 例如: <script> //换验证码 function changeimg(){ /* math.random范围是0-1 *999变成0-999 +3000 就是3000-3999 */ var time=Math.round(Math.random()*999

  • Python中MYSQLdb出现乱码的解决方法

    本文实例讲述了Python中MYSQLdb出现乱码的解决方法,分享给大家供大家参考.具体方法如下: 一般来说,在使用mysql最麻烦的问题在于乱码. 查看mysql的编码: 命令:  复制代码 代码如下: show variables like 'character_set_%'; 可以看到如下结果: character_set_client为客户端编码方式: character_set_connection为建立连接使用的编码: character_set_database数据库的编码: ch

  • 过滤Android工程中多余资源文件的解决方法

    本文以实例讲述了过滤Android工程中多余资源文件的解决方法,很有实用价值!具体描述如下: 很多开发人员在Android项目开发过程中经常会遇到这样的情况:界面开发人员发布了一个新版本的资源包,不过有的图片名称改了,有的图片删掉了,可是在实现的时候开发人员只是把新的资源覆盖到原来的资源文件夹中,随着版本的发布,在drawable或values中积累的无用资源越来越多,直到最后发布正式版的时候再想要删除这些多余的文件,于是不得不一个一个文件检查看是否有用,再决定要不要删除之. 有鉴于此,很有必要

  • PHP 5.6.11中CURL模块问题的解决方法

    PHP 5.6.11中CURL模块问题的解决方法

    按照网上的教程写了一个cURL的小例子,在apache环境下执行,一点反应也没有,放在IIS环境里就ok的,感觉问题一定出在动态连接库上,因为配置文件里的php_curl.dll已经打开了,而且在iis上ok: 网上找了一些解决方案: 设置了[环境变量]:phpext,PHPRC:无效 把php_curl.dll 放到apache/bin下:无效 检查了一下apache/bin目录下也有这两个libeay32.dll,ssleay32.dll个文件:没问题 最后试了一下,把当前php根目录下的l

  • thinkphp,onethink和thinkox中验证码不显示的解决方法分析

    本文实例讲述了thinkphp,onethink和thinkox中验证码不显示的解决方法.分享给大家供大家参考,具体如下: 使用验证码的时候,一开始正常,后来不显示了 网上说是utf-8的编码问题,什么bom去掉,转化为无bom的格式 我都试了,没用 后来知道是在调用验证码的地方  写上 Public function verify(){ import('ORG.Util.Image'); Image::buildImageVerify(); } 改成这样就行了: Public function

  • Python结巴中文分词工具使用过程中遇到的问题及解决方法

    Python结巴中文分词工具使用过程中遇到的问题及解决方法

    本文实例讲述了Python结巴中文分词工具使用过程中遇到的问题及解决方法.分享给大家供大家参考,具体如下: 结巴分词是Python语言中效果最好的分词工具,其功能包括:分词.词性标注.关键词抽取.支持用户词表等.这几天一直在研究这个工具,在安装与使用过程中遇到一些问题,现在把自己的一些方法帖出来分享一下. 官网地址:https://github.com/fxsjy/jieba 1.安装. 按照官网上的说法,有三种安装方式, 第一种是全自动安装:easy_install jieba 或者 pip

随机推荐