vue-cli3+vue2+elementUI+avue升级到vite+vue3+elementPlus+avue总结
上一个新公司接手了一个vue-cli3+vue2+vue-router3.0+elementUI2.15+avue2.6的后台管理项目,因为vue2在2023年底已经不更新维护了,elementUI也只支持到vue2,然后总结了一下vue3的优势,最后批准升级成为了vite+vue3+vue-router4.5+elementPlus2.9+avue3.6,并向下兼容vu2。
那么现在开始升级:
第一步:
先搭建一个vite项目。
在这里说一下,前期调研的时候是有两种方案的,一种是先把vue-cli3升级到vue-cli4支持vue3,然后再把webpack换成vite。第二种是直接迁移到vite+vue3项目上,然后根据报错修改。最后决定用第二种,因为快!简单粗暴!
搭建vite+vue3项目就不多说了,官网都有介绍直接执行下面代码就行。
npm init vite@latest
执行好以后安装路由vue-router
cnpm install vue-router --save
第二步:
创建router文件夹,在下面建一个router.ts和index.ts
routes.tsimport { RouteRecordRaw } from 'vue-router';//对外暴露配置路由
export const routes: Array<RouteRecordRaw> = [{path: '/',name: 'home',component: () => import('@/pages/home.vue'), // 注意这里要带上 文件后缀.vuemeta: {}},//要注意vue3 404页面写法,这是Path不能直接用*{path: '/:catchAll(.*)*', // 匹配所有路径 vue2使用* vue3使用/: pathMatch(.*)* 或 /: pathMatch(.*) 或 /: catchAll(.*)redirect: '/404',},
]
index.ts://通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import { routes } from './routes'
//创建路由器
const router = createRouter({//路由模式根据需求选择history: createWebHashHistory(),routes: routes,
})
export default router
你如果是直接把vue2项目的路由文件直接复制过来的,需要注意2点:
1、每个文件后面之前省略的.vue必须要加上。
2、404页面的path不能是通配符*,要修改为/:pathMatch(.*)或是/:catchAll(.*)
第三步:
安装sass、axios、vuex(如果你之前是用的vuex就直接安装vuex,如果之前没有建议用pinia)、element-plus和@element-plus/icons-vue、avue(如果用到了avue就安装没有的话不用安)等你当前项目中依赖的一些包。
怎么安装就不多说了,不过element-plus @element-plus/icons-vue是必须要安装的因为之前的elementui不支持vue3。安装完以后介绍一个转换神器gogocode。
可以把你原来的vue2项目的代码转成兼容vue3的,把elementUI转成兼容elementPlus的。
直接上官方连接,根据官方介绍直接转换就行,先执行vue2转vue3,再执行elementUI转elementPlus。
Vue2 到 Vue3 升级插件
Element to Element Plus 升级插件
第四步:
设置兼容vue2。根据vue官网的介绍,下载@vue/compat包,如果存在 vue-template-compiler 的话,将其替换为 @vue/compiler-sfc。
npm i @vue/compat -S
然后在vite.config.ts里面修改:
// vite.config.js
export default {resolve: {alias: {vue: '@vue/compat'}},plugins: [vue({template: {compilerOptions: {compatConfig: {MODE: 2}}}})]
}
官网就介绍到上面,可我这配置好以后,就是不兼容vue2,最后发现在main.ts里面也要配置。
在main.ts里面添加以下代码:
// 启用 Vue 2 兼容模式
import { configureCompat } from '@vue/compat';
configureCompat({ MODE: 'Vue2'});
这样再npm run dev试试,应该就可以启动起来了。
下面就是每个页面点一下看看报错了,根据报错修改了。
以下是可能存在的问题:
1、页面中引入的vue组件,后面没有加.vue的要加上.vue,要不报错。
2、elementUI升级elementPlus后样式可能会有出入,要统一在全局样式修改。
3、所有页面引入ICON图标的,因为@element-plub/icon图标名称有一些和elementUI的图标名称有出入,所以要根据官方提供的修改。icon名称参考:https://element-plus.org/zh-CN/component/icon.html
4、如果你用到了avue-crud里面的字典项,那么要确认一下dicUrl和dicHeaders是否还正确,我这里dicUrl不对,所以请求不到导致页面加载很慢,排查半天才发现。
5、全局搜索yyyy-MM-dd替换为YYYY-MM-DD
6、页面中所有require引入要改为import方式引入
7、页面中所有的::v-deep和/deep/要改为:deep()
8、vue-router升级到4.5以后name名称必须是唯一的,如果有重复的话页面是打不开的,因为路由加载就报错了。
9、时间选择器变成了英文,查看官方说明要在main.ts里面引入国际化,如下:
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus, {locale: zhCn,
})
目前这是我发现的错误,升下的就一个页面一个页面点击查看报错修复就行。
相关文章:
vue-cli3+vue2+elementUI+avue升级到vite+vue3+elementPlus+avue总结
上一个新公司接手了一个vue-cli3vue2vue-router3.0elementUI2.15avue2.6的后台管理项目,因为vue2在2023年底已经不更新维护了,elementUI也只支持到vue2,然后总结了一下vue3的优势,最后批准升级成为了vitevue3vue-router4.5element…...
车载以太网测试-3【Wireshark介绍】
1 摘要 Wireshark 是一款开源的网络协议分析工具,广泛用于网络故障排查、协议分析、网络安全检测等领域。它能够捕获网络数据包,并以详细的、可读的格式显示这些数据包的内容。广泛应用于车载网络测试,是车载网络测试工程师必须掌握的工具。…...
扫雷雷雷雷雷雷雷
大家好啊,我是小象٩(๑ω๑)۶ 我的博客:Xiao Xiangζั͡ޓއއ 很高兴见到大家,希望能够和大家一起交流学习,共同进步。 这一节课我们不学习新的知识,我们来做一个扫雷小游戏 目录 扫雷小游戏概述一、扫雷游戏分析…...
图片分类实战:食物分类问题(含半监督)
食物分类问题 simple_class 1. 导入必要的库和模块 import random import torch import torch.nn as nn import numpy as np import os from PIL import Image #读取图片数据 from torch.utils.data import Dataset, DataLoader from tqdm import tqdm from torchvision impo…...
RuoYi框架添加自己的模块(学生管理系统CRUD)
RuoYi框架添加自己的模块(学生管理系统) 框架顺利运行 首先肯定要顺利运行框架了,这个我不多说了 设计数据库表 在ry数据库中添加表tb_student 表字段如图所示 如图所示 注意id字段是自增的 注释部分是后面成功后前端要展示的部分 导入…...
机器学习在地图制图学中的应用
原文链接:https://www.tandfonline.com/doi/full/10.1080/15230406.2023.2295948#abstract CSDN/2025/Machine learning in cartography.pdf at main keykeywu2048/CSDN GitHub 核心内容 本文是《制图学与地理信息科学》特刊的扩展评论,系统探讨了机…...
【JAVA架构师成长之路】【电商系统实战】第9集:订单超时关闭实战(Kafka延时队列 + 定时任务补偿)
30分钟课程:订单超时关闭实战(Kafka延时队列 定时任务补偿) 课程目标 理解订单超时关闭的业务场景与核心需求。掌握基于 Kafka 延时队列与定时任务的关单方案设计。实现高并发场景下的可靠关单逻辑(防重复、幂等性)。…...
《探秘课程蒸馏体系“三阶训练法”:解锁知识层级递进式迁移的密码》
在人工智能与教育科技深度融合的时代,如何高效地实现知识传递与能力提升,成为众多学者、教育工作者以及技术专家共同探索的课题。课程蒸馏体系中的“三阶训练法”,作为一种创新的知识迁移模式,正逐渐崭露头角,为解决这…...
K8s 1.27.1 实战系列(六)Pod
一、Pod介绍 1、Pod 的定义与核心设计 Pod 是 Kubernetes 的最小调度单元,由一个或多个容器组成,这些容器共享网络、存储、进程命名空间等资源,形成紧密协作的应用单元。Pod 的设计灵感来源于“豌豆荚”模型,容器如同豆子,共享同一环境但保持隔离性。其核心设计目标包括…...
Java CountDownLatch 用法和源码解析
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,…...
Unity引擎使用HybridCLR(华佗)热更新
大家好,我是阿赵。 阿赵我做手机游戏已经有十几年时间了。记得刚开始从做页游的公司转到去做手游的公司,在面试的时候很重要的一个点,就是会不会用Lua。使用Lua的原因很简单,就是为了热更新。 热更新游戏内容很重要。如果…...
深度学习进阶:神经网络优化技术全解析
文章目录 前言一、优化问题的本质1.1 目标1.2 挑战 二、梯度下降优化算法2.1 基础SGD2.2 动量法2.3 Adam优化器 三、正则化技术3.1 L2正则化3.2 Dropout 四、学习率调度4.1 为什么要调度?4.2 指数衰减4.3 ReduceLROnPlateau 五、实战优化:MNIST案例5.1 完…...
肿瘤检测新突破:用随机森林分类器助力医学诊断
前言 你有没有想过,科技能不能在肿瘤检测中发挥巨大的作用?别着急,今天我们将带你走进一个“聪明”的世界,通过随机森林分类器进行肿瘤检测。对,你没听错,机器学习可以帮助医生更快、更准确地判断肿瘤是良性还是恶性,就像医生口袋里的“超级助手”一样,随时准备提供帮…...
DeepSeek学习 一
DeepSeek学习 一 一、DeepSeek是什么?二、Deepseek可以做什么?模型理解提问内容差异使用原则 模式认识三、如何提问?RTGO提示语结构CO-STAR提示语框架DeepSeek R1提示语技巧 总结 一、DeepSeek是什么? DeepSeek是一家专注通用人工…...
编程考古-Borland历史:《.EXE Interview》对Anders Hejlsberg关于Delphi的采访内容(上)
为了纪念Delphi在2002年2月14日发布的25周年(2020.2.12),这里有一段由.EXE杂志编辑Will Watts于1995年对Delphi首席架构师Anders Hejlsberg进行的采访记录。在这次采访中,Anders讨论了Delphi的设计与发展,以及即将到来的针对Windows 95的32位版本。 问: Delphi是如何从T…...
高并发之接口限流,springboot整合Resilience4j实现接口限流
添加依赖 <dependency><groupId>io.github.resilience4j</groupId><artifactId>resilience4j-spring-boot2</artifactId><version>1.7.0</version> </dependency><dependency><groupId>org.springframework.boot…...
电脑如何拦截端口号,实现阻断访问?
如果你弟弟喜欢玩游戏,你可以查询该应用占用的端口,结合以下方法即可阻断端口号,让弟弟好好学习,天天向上! 拦截端口可以通过防火墙和路由器进行拦截 ,以下是常用方法: 方法 1:使用…...
RK3588 安装ffmpeg6.1.2
在安装 ffmpeg 在 RK3588 开发板上时,你需要确保你的开发环境(例如 Ubuntu、Debian 或其他 Linux 发行版)已经设置好了交叉编译工具链,以便能够针对 RK3588 架构编译软件。以下是一些步骤和指导,帮助你安装 FFmpeg: 1. 安装依赖项 首先,确保你的系统上安装了所有必要的…...
SQL SELECT DISTINCT 语句
在 SQL 中,SELECT DISTINCT 语句用于从表中查询不重复的值。这对于需要从数据库检索唯一值时非常有用。DISTINCT 关键字会去除结果集中重复的行,只返回唯一的记录。 SELECT DISTINCT column1, column2, ... FROM table_name; column1, column2, ... 是…...
MELON的难题
MELON的难题 真题目录: 点击去查看 E 卷 200分题型 题目描述 MELON有一堆精美的雨花石(数量为n,重量各异),准备送给S和W。MELON希望送给俩人的雨花石重量一致,请你设计一个程序,帮MELON确认是否能将雨花石平均分配。 输入描述 第1行输入为雨花石个数: n,0 < n &l…...
给操作系统爱好者的RISC-V中断实战指南:从SiFive Unleashed开发板到Xv6内核代码
RISC-V中断机制深度解析:从硬件触发到Xv6内核实战 1. RISC-V中断体系架构全景 RISC-V中断系统采用分层设计理念,硬件与软件协同构成了完整的异常处理框架。作为开源指令集架构,RISC-V的中断设计既保持了精简性,又通过可扩展机制满…...
10个UTF8-CPP最佳实践:让你的C++ Unicode处理更高效
10个UTF8-CPP最佳实践:让你的C Unicode处理更高效 【免费下载链接】utfcpp UTF-8 with C in a Portable Way 项目地址: https://gitcode.com/gh_mirrors/ut/utfcpp UTF8-CPP是一个轻量级的C库,提供了便捷的UTF-8编码和解码功能,帮助开…...
金蝶云星空日常使用功能
1、必录和锁定和隐藏 2、取多少位字符 FMaterialId <> null AND ( FMaterialId.FNumber[0:3] in (321) or FMaterialId.FNumber[0:1] in (P)) 3、设定指定值...
Android AI助手开发实战:基于MVVM与OpenAI API的AnywhereGPT项目解析
1. 项目概述与核心价值最近在折腾移动端AI应用,发现一个挺有意思的开源项目,叫AnywhereGPT-Android。简单来说,它就是一个让你能在Android手机上,通过调用OpenAI的API(比如GPT-3.5/4)或者本地部署的模型&am…...
提供充电桩运维托管的服务商:选择标准与服务内容解析
一、引言据中国电动汽车充电基础设施促进联盟(EVCIPA)数据显示,截截至2026年2月底,我国电动汽车充电基础设施(枪)总数达到2101.0万个,同比增长47.8%。其中,公共充电设施(…...
音乐学者必看的NotebookLM冷启动指南,从乐谱OCR识别到和声进行语义建模,一步到位
更多请点击: https://intelliparadigm.com 第一章:NotebookLM在音乐学研究中的范式革命 NotebookLM(由Google Research推出的基于用户上传文档的AI助手)正悄然重塑音乐学研究的方法论边界。它不再依赖通用知识库的模糊匹配&#…...
别只当稳压器用!用LM7805做个简易功放,驱动小喇叭实测(附电路图)
从稳压到扩音:用LM7805打造微型功放的创意实践 1. 重新认识LM7805:不只是稳压芯片 LM7805在电子爱好者心中一直是"稳压神器"的代名词,但鲜少有人意识到这颗经典三端稳压器隐藏的音频放大潜力。当我们撕掉它身上"5V稳压专用&qu…...
Flutter 表单处理完全指南
Flutter 表单处理完全指南 引言 表单是移动应用中不可或缺的一部分,Flutter 提供了强大的表单处理能力。本文将深入探讨 Flutter 表单的各种用法和高级技巧。 基础概念回顾 核心组件 Form: 表单容器TextFormField: 文本输入字段FormState: 表单状态管理GlobalKey: 全…...
危化园区 ReID 跨镜管控难,镜像视界无感定位筑牢安全防线
危化园区 ReID 跨镜管控难,镜像视界无感定位筑牢安全防线危化工业园区作为化工生产、仓储、运输的核心载体,承载着易燃易爆、有毒有害等高危物料的全流程作业,其安全管控水平直接关系到人员生命安全、财产安全与生态环境安全。不同于普通工业…...
基于CircuitPython与RP2350的嵌入式多声道音频系统设计与实践
1. 项目概述:用CircuitPython打造你的专属交互式音频系统如果你玩过树莓派Pico或者Adafruit的Feather系列开发板,可能会觉得在微控制器上处理音频是件挺麻烦的事——要么得用专门的解码芯片,要么代码复杂得让人头疼。但最近我在一个互动艺术装…...
