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…...
亿图脑图高级技能:从思维建模到生产力提升的完整指南
1. 项目概述与核心价值最近在整理个人知识库和项目文档时,我一直在寻找一个能让我思维更清晰、协作更高效的“大脑外挂”。市面上思维导图工具不少,但要么功能臃肿、学习曲线陡峭,要么过于轻量、难以应对复杂的结构化思考。直到我深度体验并拆…...
接手遗留系统第一周,我做了三件事,团队从此不再怕改老代码
刚跳槽到新公司,技术总监在入职谈话时递给我一杯咖啡,语气沉重地说:“我们最核心的交易系统已经跑了八年,负责它的老张去年离职了。现在整个团队没人敢动里面的代码,每次改需求都像在拆炸弹。”他停顿了一下࿰…...
开源破产法律实务知识库:构建结构化办案指南与协作平台
1. 项目概述:一个破产法律实务的开源知识库最近在整理过往的破产案件卷宗时,我一直在思考一个问题:如何将那些零散、重复但又至关重要的法律文书、办案流程和实务要点,系统地沉淀下来,形成一套可以随时查阅、迭代更新的…...
Kali Linux 新手速成:Docker 部署实战与靶场环境一键构建
1. Kali Linux与Docker的黄金组合 刚接触网络安全的朋友们,肯定对Kali Linux不陌生。这个专为安全测试设计的操作系统,就像是一把瑞士军刀,集成了各种强大的工具。但今天我要分享的是一个更高效的玩法——用Docker来部署漏洞靶场。 为什么说这…...
如何3分钟精准定位Windows热键冲突:Hotkey Detective深度技术解析
如何3分钟精准定位Windows热键冲突:Hotkey Detective深度技术解析 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective …...
基于ESP32-S3与CircuitPython的NASA小行星追踪器项目实践
1. 项目概述:一个会“说话”的太空瞭望台如果你对头顶那片星空既充满好奇又带有一丝敬畏,想知道是否有“天外来客”正悄无声息地接近我们,那么这个项目就是为你准备的。这不是一个简单的数据看板,而是一个亲手搭建的、能实时“对话…...
AI文本检测技术解析:从原理到实践,构建内容真实性鉴别工具
1. 项目概述:AI写作检测工具的核心价值最近在GitHub上看到一个挺有意思的项目,叫“AI-Writing-Detection”。光看名字,你大概就能猜到它是干什么的——检测一段文本是不是AI写的。这玩意儿现在可太有用了。自从大语言模型(LLM&…...
开源HR智能体openhr-agent:本地部署、模块化设计与核心应用场景解析
1. 项目概述:一个开源的HR智能体最近在GitHub上看到一个挺有意思的项目,叫openhr-agent。光看名字,你可能会觉得这又是一个“AI要取代HR”的噱头工具。但实际深入了解一下,我发现它的定位和设计思路,比想象中要务实和清…...
量子电路仿真加速器QEA的FPGA实现与优化
1. 量子电路仿真加速器的核心挑战与现状量子计算正在重塑我们对计算能力的认知边界。作为一名长期从事高性能计算与量子仿真研究的工程师,我见证了量子仿真技术从理论探索到工程实现的完整历程。量子电路仿真作为验证量子算法正确性的关键技术,其核心痛点…...
基于RAG与向量数据库的智能代码搜索工具设计与实现
1. 项目概述:一个面向开发者的智能代码搜索与理解工具 最近在GitHub上看到一个挺有意思的项目,叫 holasoymalva/perplexity-code 。乍一看这个标题,可能会有点困惑——“perplexity”在机器学习里通常指“困惑度”,是衡量语言模…...
