vue 升级到vue3踩坑记录（vue和element）

已于 2022-03-09 14:25:18 修改
阅读量9.8k 收藏 2
点赞数 1
分类专栏： vue3 文章标签： vue.js javascript 前端
于 2021-11-10 16:59:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42875598/article/details/121248156
版权 
最近在把公司项目从vue2+element 升级到 vue3+elementPlus，实实在在遇到很多问题，先在把报错信息捋一捋。

1.Runtime directive used on component with non-element root node
意思是自定义指令不能放到组件上，而是要放到自有的元素上

2.element-plus icons不能用动态class的方式导入
需要做：将icons全局导入，然后用  
	<ElIcon>
    	<component :is="icon" />
  	</ElIcon>
  	的方式导入
coding者
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue2项目升级vue3项目所遇到的问题及解决办法
qq_57558631的博客
05-16 4774
第一次 1.v-model => v-model:value 2.生命周期：beforeDestroy => beforeUnmount destroyed => unmounted 3.事件API :this.$emit('') => $emit(this,'') 子组件触发事件写入选项中 4.() => import('') 转化 Vue.defineAsyncComponent(() => import('')) 5.插槽solt-sc
vue学习-自定义指令
Rulelur的博客
11-05 3978
vue局部指令 使用：元素上加上v-自定义指令名 <template> <input type="text" v-my-focus /> </template> <script> export default { directives: { "my-focus": { mounted(el) { el.focus(); }, }, }, }; </script> 钩.
vue控制台警告Runtime directive used on component with non-element root node.
热门推荐
动感超人的博客
09-01 3万+
你昨天晚上又没会我的消息，在我孜孜不倦的骚扰下，你终于舍得回我了，你说“滚”，这其中一定有什么含义，我想了很久，滚是三点水，这代表你对我的思念也如滚滚流水一样汹涌，我感动哭了，不知道你现在在干嘛，我很想你。今天我还是照常给你发消息，汇报日常工作，你终于回了我四个字：“嗯嗯，好的”你开始愿意敷衍我了，我太感动了受宠若惊。sh-a傻，噢你的意思是说我傻，那b就是baby的意思了吧，原来你是在叫我傻宝，这么宠溺的语气，我竟一时不相信，其实你也是喜欢我的对吧。滚就滚，我看不了青春有你，我的青春也没有你。...
解决 Runtime directive used on component with non-element root node. The directives will not function
最新发布
weixin_45487909的博客
06-05 716
查看项目里的v-show、v-if、v-loading，外面包一层template或者div。运行时指令，用于非元素根节点的组件。这些指令将无法发挥预期的作用。
代码 BUG 大全
mygoes
06-02 9259
前端 BUG 大全 , 持续更新中
vite2.x+vue3踩坑
long321041080的博客
08-25 680
vite2.x+vue3.x开发以及vscode中使用eslint遇到问题
基于Vue3和Element-plus的文章发布平台设计源码
04-08
文章发布平台 - 基于Vue3和Element-plus构建，包含39个文件，如VUE、JS、JSON、JPG、PNG、CJS、GITIGNORE、HUSKY和MD等。该系统是一个文章管理系统，使用Vue3技术栈，为用户提供了一个高效、易用的文章发布平台。
HTML-引入Vue3和Element Plus
04-24
在本项目中，我们主要探讨如何在HTML页面中引入Vue3框架和Element Plus UI库，以便构建一个功能丰富的前端应用。Vue3是Vue.js的最新版本，提供了许多性能优化和新特性，而Element Plus则是一个基于Vue3的高质量UI...
vue3+element-plus+admin
04-12
Element-Plus 是 Element UI 的升级版，为 Vue3 提供了一套丰富的组件库，涵盖了表格、按钮、对话框等多种UI元素。 1. **Vue3**: Vue3 作为 Vue.js 的核心，其主要改进包括： - **Composition API**: Vue3 引入了 ...
基于Vue和Element的低代码平台设计源码
05-31
低代码平台项目源码，共821个文件，采用Javascript、Vue、CSS和HTML等语言开发。该平台基于Element UI组件库，旨在提供一种快速、高效的开发方式，让开发者能够更专注于业务逻辑而非技术实现。
详解Vue用自定义指令完成一个下拉菜单（select组件）
11-27
这次分享的是关于Vue自定义指令的使用方法，学习完基础后我们再来实战完成一个下拉列表，废话不多说，直接上干货 基本用法 //全局注册 Vue.directive('my-directive', { // 指令选项 }) // 局部注册 var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令选项 } }) 相信对Vue比较熟悉的人看完都知道，directive的写法与组件 基本类似，只是方法名由component改为了directive。上例只是注册了自定义指令v-my-directiv
Vue3+Element Plus后台管理系统模版.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
Runtime directive used on component with non-element root node. The directives will not function as
LlanyW的专栏
04-03 659
源码上面是一个组件封装一个弹窗el-dialog然后每次运行有以下警告。
vue使用defineAsyncComponent控制台警告Runtime directive used on component with non-element root node.
m0_73146522的博客
12-05 700
移动组件放入div标签中，控制台报错即可清空。组件放在了template中。
Element Plus 警告：Runtime directive used on component with non-element root node. The directives will
miaomiaomiao__的博客
12-15 757
Dialog上不能使用v-loading。
[Vue warn]: Runtime directive used on component with non-element root node. The directives will not
qq_54250695的博客
04-19 277
vue一些小问题一些记录
Vue的初始化和响应式原理剖析
yhzzy的博客
08-30 551
- UMD CommonJS ES Module Full vue.js vue.common.js vue.esm.js Runtime-only vue.runtime.js vue.runtime.common.js vue.runtime.esm.js Full(production) vue.min.js Runtime-only(production) vue.runtime.min.js
VUE之命令行报错：Component template should contain exactly one root element. If you are using v-if on multi...
weixin_30328063的博客
09-13 313
Failed to compile../node_modules/vue-loader/lib/template-compiler?{"id":"data-v-59926570","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href...
vue3 怎么升级 element-plus 到最新版本
06-09
要将 Element Plus 升级到最新版本，你需要执行以下步骤： 1. 在项目根目录下找到 `package.json` 文件，找到 `element-plus` 的依赖项，将其版本号更改为最新版本。 2. 运行命令 `npm install` 或 `yarn install`，以安装最新版本的 `element-plus`。 3. 如果 `element-plus` 的 API 发生了变化，你可能需要修改你的代码以适应最新版的 `element-plus`。 4. 如果你使用的是 Vue CLI，你可以运行命令 `vue upgrade --next` 来升级项目的 Vue 版本。 5. 如果你使用的是 Vite，你可以运行命令 `npm update vite` 或 `yarn upgrade vite` 来更新 Vite 版本。 记得在升级前备份你的项目，以免出现意外情况。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值