《Vue3 基础知识》 使用 GoGoCod 升级到Vue3+ElementPlus 适配处理
此篇为 《Vue2+ElementUI 自动转 Vue3+ElementPlus(GoGoCode)》 的扩展!
Vue3 适配
Vue3 不兼容适配
Vue 3 迁移指南 在此,本章只讲述项目或组件库中遇到的问题;
-
Vue3CSS 深度选择器 有变化,有警告[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead./* Vue2 写法一 */ .a >>>.b /* Vue2 写法二 */ .a /deep/ .b/* Vue3 写法*/ .a :deep(.b) -
Vue props 多个类型,不要用 | ,用数组 []。否则报错
expected "indent", got "eos"expandLevel: {// type: Number | String,// vue2 可以,vue3 报错type: [Number, String], // vue2/vue3 正确default: 1, }
GoGoCode 自动升级适配
-
v-model:value报错,全局搜v-model:value并全局替换为v-model。其实Vue2和Vue3都不加:value,不知为何转换时加上了…
-
插槽报错
Duplicate slot names found发现重复的插槽名称 。仅两个 slot 在一块报错… -
HTML元素上的方法,例如@click=中有多个表达式仅换行没分号 ; ,这是语法错误。建议多个表达式就写在方法里
Webpack 转 Vite 适配
动态加载文件 Webpack 用 require.context, Vite 用 import.meta.glob
- src\params.js
- src\store\index.js
Webpack 用 require.context
const modulesList = require.context("./src/components", true, /\.vue$/);
const modules = modulesList.keys().reduce((obj, modulePath) => {// 文件名const moduleName = modulePath.replace(/^\.\/(.*)\/(.*)\.\w+$/, "$2");// 模块对象let moduleObj = modulesList(modulePath);// 放入模块obj[moduleName] = moduleObj.default;return obj;}, {});
Vite 用 import.meta.glob
// 注意加在 `eager: true` 是同步处理
const modulesList = import.meta.glob('./src/components/**/*.vue', { eager: true });
const modules = Object.keys(modulesList).reduce((obj, path) => {// 文件名const moduleName = path.replace(/(.*\/)*([^.]+).*/ig, "$2");// 放入模块obj[moduleName] = modulesList[path].default;return obj;
}, {})
const modulesFiles = import.meta.glob('./funcs/**/*.vue')let modules = {};
for (const path in modulesFiles) {modulesFiles[path]().then((mod) => {// 文件名const moduleName = path.replace(/(.*\/)*([^.]+).*/ig, "$2");// 放入模块modules[moduleName] = mod.default;})
}
Element Plus 适配
- el-button 警告
[props] [API] type.text is about to be deprecated in version 3.0.0, please use link instead.
解决: 官网中 el-button type=“text” 用于链接按钮已在 v3.0.0 废除
// 原
<el-button type="text">文字按钮</el-button>// 改为
<el-button type="primary" link>文字按钮</el-button>
- el-input 警告
Invalid prop: validation failed. Expected one of ["", "default", "small", "large"], got value "mini".
解决: 属性 size 在 ElementUI 和 ElementPlus 之间有差异
- Element UI 用
medium / small / mini - Element Plus 用
large / default / small
- el-tabs 方法 tab-click 返回值 ElementUI 和 ElementPlus 不一样
差异: ElementUI el-tabs 和 ElementPlus el-tabs

- el-input ElementUI 和 ElementPlus 有点差异,ElementPlus 多嵌套了一层
el-input__wrapper
解决: 改造 src\assets\scss\elements\input.scss,设置 padding:0 !important

- Element Icon 图标 警告
voided by marking the component withmarkRawor usingshallowRefinstead ofref.
解决: 以转换后一张图系统文件 src\components\mode-refreshing\head.vue 为例。代码第 10 行 ElIconSetting,放在 data() 中,做了深度响度,会有必要的开销。
// 修改前
import {Setting as ElIconSetting,DataAnalysis as ElIconDataAnalysis,SwitchButton as ElIconSwitchButton,
} from '@element-plus/icons-vue'
export default {data() {return {ElIconSetting,ElIconDataAnalysis,ElIconSwitchButton}},
}
提示加上 markRaw 不被代理 或 shallowRef 浅层响应。如代码 2,11-13 行
// 修改后
import { shallowRef } from 'vue'
import {Setting as ElIconSetting,DataAnalysis as ElIconDataAnalysis,SwitchButton as ElIconSwitchButton,
} from '@element-plus/icons-vue'
export default {data() {return {ElIconSetting: shallowRef(ElIconSetting),ElIconDataAnalysis: shallowRef(ElIconDataAnalysis),ElIconSwitchButton: shallowRef(ElIconSwitchButton),}},
}
相关文章:
《Vue3 基础知识》 使用 GoGoCod 升级到Vue3+ElementPlus 适配处理
此篇为 《Vue2ElementUI 自动转 Vue3ElementPlus(GoGoCode)》 的扩展! Vue3 适配 Vue3 不兼容适配 Vue 3 迁移指南 在此,本章只讲述项目或组件库中遇到的问题; Vue3 移除 o n , on, on&#…...
c#string方法对比
字符串的截取匹配操作在开发中非常常见,比如下面这个示例:我要匹配查找出来字符串数组中以“abc”开头的字符串并打印,我下面分别用了两种方式实现,代码如下: using System; namespace ConsoleApp23{ class Progra…...
Electron实战(一):环境搭建/Hello World/打包exe
文章目录 Electron安装Node.jsNodeJs推荐配置开始Electron项目创建index.js文件创建src目录运行打包生成exe生成安装包踩坑 下一篇Electron实战(二):将Node.js和UI能力(app/BrowserWindow/dialog)等注入html Electron Electron是一个使用JavaScript, HT…...
【C++】运算符重载详解
💗个人主页💗 ⭐个人专栏——C学习⭐ 💫点击关注🤩一起学习C语言💯💫 目录 导读 1. 为什么需要运算符重载 2. 运算符重载概念 3. 运算符重载示例 3.1 运算符重载 3.2 >或<运算符 4. 运算符重…...
评论区功能的简单实现思路
评论区功能是社交类项目中的核心组成部分,它涉及到前端的交云和后端的数据处理。基于你的技术栈(前端 Vue3,后端 Java),下面是一个具体的实现思路和数据库设计建议,并探索一下知乎的评论系统。 数据库设计…...
Java自救手册
目录 访问地址 访问地址,发现不通,无法访问: 网络不通一般有两种情况: Maven 拿Maven 拿到Maven以后 Maven单独的报红 Git git注意: 目录 访问地址 访问地址,发现不通,无法访问&…...
ASM-HEMT参数提取和模型验证测试
参数提取程序 直流I-V参数提取 DC模型参数提取流程对于ASM-GaN-HEMT模型可以总结在下图中。 以下步骤描述了该流程: 在模型中设置物理参数,如L(沟道长度)、W(沟道宽度)、NF(栅指数…...
浅压缩、深压缩、双引擎、计算机屏幕编码……何去何从?
专业视听领域尤其显示控制和坐席控制领域,最近几年最激动人心的技术,莫过于分布式了。 分布式从推出之日就备受关注:担心稳定性的,质疑同步性能的,怀疑画面质量的…… 诚然,我们在此前见多了带着马赛克的…...
2020年通信工程师初级专业实务真题
文章目录 一、第1章 现代通信网概述:信令网、同步网、管理网。第10章 通信业务:通信产业链,通信终端的分类,通信业务的定义及分类二、第3章 接入网:无线接入网的优点,接入网的接口(UNIÿ…...
Linux常见面试题汇总
Linux上如何查询某个端口是否被占用? 在Linux上,你可以使用以下几种方法来查询某个端口是否被占用: 使用netstat命令: netstat -tuln | grep <端口号>这个命令会列出当前正在运行的所有TCP和UDP端口,并过滤出指…...
C语言小游戏:贪吃蛇(游戏开发的环境和功能介绍)
❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载,请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主,代码兴国!❤❤❤ 生命不停,学习不止。铁汁们,我是大伟,欢迎来到大伟的游戏时间,…...
ElementUI Form:InputNumber 计数器
ElementUI安装与使用指南 InputNumber 计数器 点击下载learnelementuispringboot项目源码 效果图 el-radio.vue (InputNumber 计数器)页面效果图 项目里el-input-number.vue代码 <script> export default {name: el_input_number,data() {re…...
apk反编译修改教程系列---修改apk的默认颜色 布局颜色 手机电脑同步演示【十】
往期教程: apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】 apk反编译修改教程系列---简单…...
响应式开发如何设置断点,小屏幕界面该如何显示(有动图)
Hi,我是贝格前端工场,本期分享响应式开发,如何设置屏幕断点,pc页面布局到了移动端之后该如何布局的问题,微软也提供了设置屏幕断点的动图演示,非常直观。 一、什么是响应式开发,为何要设置屏幕断…...
Java基础 集合(二)List详解
目录 简介 数组与集合的区别如下: 介绍 AbstractList 和 AbstractSequentialList Vector 替代方案 Stack ArrayList LinkedList 前言-与正文无关 生活远不止眼前的苦劳与奔波,它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界…...
UE4运用C++和框架开发坦克大战教程笔记(十七)(第51~54集)
UE4运用C和框架开发坦克大战教程笔记(十七)(第51~54集) 51. UI 框架介绍UE4 使用 UI 所面临的问题以及解决思路关于即将编写的 UI 框架的思维导图 52. 管理类与面板类53. 预加载与直接加载54. UI 首次进入界面 51. UI 框架介绍 U…...
GaussDB新体验,新零售选品升级注入新思路【华为云GaussDB:与数据库同行的日子】
选品思维:低频VS高频 一个的商超,假设有50个左右的品类,每个品类下有2到10个不等的商品。然而如此庞大的商品,并非所有都是高频消费品。 结合自身日常的消费习惯,对于高频和低频的区分并不难。一般大型家电、高端礼盒…...
C语言问题汇总
指针 #include <stdio.h>int main(void){int a[4] {1,2,3,4};int *p &a1;int *p1 a1;printf("%#x,%#x",p[-1],*p1);} 以上代码中存在错误。 int *p &a1; 错误1:取a数组的地址,然后1,即指针跳过int [4]大小的字节…...
QT 的 blockSignals(true) 的作用范围
在 Qt 中,blockSignals 是一个用于控件的方法,它用于阻止控件发出的信号。如果你在一个 MainWindow 对象上调用 blockSignals(true),它会阻止该 MainWindow 对象发出的所有信号。 这意味着,如果 MainWindow 上有任何子控件&#…...
【C++私房菜】类和对象万字详解
目录 一、类与对象 1、类是什么 二、类和对象的基础知识 2.1 定义类:成员变量和成员函数 2.2 创建对象:实例化一个类的对象。 2.3对象的生命周期:构造函数和析构函数。 a. 构造函数 b. 析构函数 c.小结: 三、成员变量和…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
招商蛇口 | 执笔CID,启幕低密生活新境
作为中国城市生长的力量,招商蛇口以“美好生活承载者”为使命,深耕全球111座城市,以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子,招商蛇口始终与城市发展同频共振,以建筑诠释对土地与生活的…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
