项目从vue2 升级vue3，项目大迁移，UI组件库更换

鹤渺

已于 2023-12-25 14:09:20 修改

阅读量3k

点赞数 36

分类专栏： vue2 升级 Vue3 项目迁移文章标签： vue.js 前端

于 2023-12-20 19:28:27 首次发布

本文链接：https://blog.csdn.net/ParkChanyelo/article/details/135106433

版权

vue2 升级 Vue3 项目迁移专栏收录该内容

6 篇文章 1 订阅

订阅专栏

第五步：main.ts改成main.js（可忽略）

详细迁移流程介绍

总结

背景描述

之前的版本：vue 2.6.8 + iview 3.3 + element-ui 2.6.1 + echarts 4.2
升级后：vue 3 + element-plus + echarts5

有一个项目的后台管理系统之前一直用的vue2.6.8，大概是5年前开始开发的项目，最近要新写一个项目，但是用到之前的后台管理系统，所以这次leader打算让我将Vue2升级到vue3，因为vue3我最熟练的还是element-ui的组件，所以UI框架打算还是用这个，之前Vue2用的iview的UI虽然好看了一点点，但是这个组件库很多组件有一些弊端，两个组件库混用还有很多不可解决的bug，所以这次干脆弃用。

升级Vue3是一个方面，另一个是要将项目里的功能全部挪过来，虽然admin后台的功能也不多，也就以下几个模块:

1. 人员管理

2.角色权限管理

3.统计汇总

4.操作记录

5.个人设置

6.新增的两个业务页

这几个模块都是admin后台常见的功能，难点是这个后台系统的主要脉络我并不清晰，也就大概了解一些权限方面的控制，详细的功能如果完全升级到vue3的写法，也就要重新写，有一些功能升级起来，肯定要重新测试，并且之前的摒弃的逻辑也要全部了解，所以时间上肯定很紧急，但是我现在也不要求尽善尽美，现将后台的主要功能搭起来，然后一些比如人员管理里面的很多功能，我可以先不做，主要是权限这块还要沿用之前的写法，因为后端不升级，所以接口都复用。

开发准备

先起一个空项目，引用一些必要的框架等，然后就开始迁移旧admin平台的功能。

起项目的过程，很多地方都有教程，我这边就不多讲了，我先梳理我主要的迁移过程。

第一步：升级环境

升级之前看到自己的node 还是14版本，这里先升级node，两种方法，卸载再安装新版本，或者借助NVM来切换node版本，它帮助我们下载安装。我之前写过一篇教程，可以看：NVM使用教程

这次将node升级为20.2.0的版本，所以下载nvm后就很好控制啦：

但是升级完node，还需要对应地升级npm，这里有一个对照表：

我现在的npm 还是6.14.17 所以下一步就是升级npm ，不过nvm直接给我更新啦,很轻松，第一步很顺畅！坏消息是，旧项目，切换了20的版本后就起不来了，不兼容，所以我需要来回切换。

第二步：划分功能迁移顺序

因为是迁移旧项目，并且升级版本，所以前端重新写，但是可以用旧项目的服务，也就是我还可以用旧项目的接口来改造，那么久不用考虑接口，只考虑功能上的迁移顺序了。在这一步，需要先知道，系统内除了业务以外的主要功能，之前梳理的是业务功能，比如各种管理页面，这里是详细的系统迁移的过程：

1.登录、退出功能

2.Axios的封装和API

3.路由跳转和路由表的配置

4.用户信息存储，涉及store

5.权限管理，暂时可以先不管

6.系统的layout开发

7.sidemenu的开发

8.header的开发

9.main区域的开发

10.组件库的引入

11.系统主题样式的引入和迁移

12.开始开发页面

13.图标组件库的引入，SVG的封装
以上等等

第三步：详细了解需要迁移的业务页面

这里是详细的页面：首页、统计汇总、人员管理、项目列表、角色设置、操作记录、个人设置，以及需要新加的两个业务页，其中人员管理和项目列表是共用一个页面，所以，会封装的比较麻烦，后面再开发，而角色管理是控制权限的，所以也后面开发这部分，我先按照超级管理员来写，比较简单写的，肯定是个人设置，首页，所以开发的话，也先开发这部分，之后涉及权限和角色的再详细阐述。

第四步：项目的一些配置的准备

这里是项目的业务开发前的一些准备工作，先把项目配置好，因为用了一个比较简单的模板，所以就先在模板的基础上进行操作。其实要不要模板都一样，只是模板会帮我处理一些琐碎的事情，所以大大节约时间，而且这个模板之前有用过，那就在这个基础上写啦

升级后使用的模板是 vue3-admin-tshttps://github.com/jzfai/vue3-admin-ts

中文官网：vue3-admin-plus | 下一代的前端pc框架

国内地址：vue3-admin-ts

在项目的开始开发之前，先将项目的settings设置好，这样才不会格式化冲突，我这里直接粘贴复制的其他项目的。

这里我个人浅浅的见解是，毕竟很多人协同开发项目，编辑器格式化不一样，很容易出现代码覆盖的问题，不方便后期维护和代码历史回溯。

所以我先在项目引入了ESLint 和 Prettier，当然使用哪个看团队要求，我这里是都使用了。

如果接手老项目，要迁移新项目，肯定要将之前项目的规范化要求拿过来，通常是 .eslintrc.js、.eslintrc.json、.prettierrc.js、.prettierrc.json 等文件。我主要改了下面几个：

并且需要配置vscode下的Settings.json文件。

第五步：main.ts改成main.js（可忽略）

并且在一切开始之前，由于工期较短，我自己也比较擅长JS，所以要将一些配置和入口文件的ts改成js格式了，主要的Vue都还是用ts开发，那么这一步，就需要花费一些时间。这部分工作，比较繁琐，根据项目的配置来，每一步都需要查找各个配置和插件之间的关系，很多插件不太了解，所以磕磕绊绊的，但是主要改的是这些：

箭头指向的都是新加或者修改文件名的ts文件，既然我要用JS来写，而且Ts的一些配置我也不熟悉，那么我干脆就不用TS，但项目还是要TS兼容JS，所以把main,permission,settings这几个文件改成JS写法，然后配置vite.config.js，也就是JS的一些打包配置，jsconfig.json 这是开发配置，其余的配置都不改，这样也顺利启动起来了。