使用 Vue3 重构 Vue2 项目

前言：

2020年9月18日，vue3正式版发布了，前几天学习完成后，我决定重构后台管理项目，本篇文章给大家讲解了重构过程中遇到的一些问题和解决方案。

---

一、项目整体效果展示

---

二、项目下载使用方法

点击进行下载：https://download.csdn.net/download/weixin_62897746/87454522

下载的中包含，文件编写要求规范，接口文档，和项目效果展示，也有写好的代码，大家也可以自己根据要求完成当前项目。

项目创建方式：

Vue2 项目创建按照 项目实战.md 文档中创建方式创建项目。
Vue3 项目创建按照 博客（点击跳转至指定文章） 中 Vite 创建方式创建项目。

---

使用方法：

下载完成后，给文件夹进行解压后，双击进入文件夹。
vue2-hotaiguanli 为 Vue2 版本项目。
vue3-hotaiguanli 为 Vue3 版本项目。
Vue2 打开项目方式为：双击进入 vue2-hotaiguanli 中的 project-one 文件夹，在地址栏输入 cmd 然后点击回车，进入后执行指令 npm run serve 。（如图所示）

---

Vue3 打开项目方式为：双击进入 vue3-hotaiguanli 文件夹，在地址栏输入 cmd 然后点击回车，进入后执行指令 npm run dev 。（如图所示）

---

三、为什么要重构项目

使代码更容易理解，方便后期维护，也就是要让每个模块的定位清晰明确
发现隐藏的代码缺陷
代码风格要优雅～，内容质量高，按照合理的设计模式和编程思想去重构
同步新的需求
项目功能交互来个极致体验，功能上要要尽量做到不卡顿 不闪退，要满足产品需求的细节
从长远来看，可以提高编程效率

---

四、重构的流程

1. 新建项目，确定脚手架版本

使用 Vite 创建项目

2. 项目整体迁移

把项目中所有需要用到的组件复制到新创建的 Vue3 项目中

3. 重构路由，axios，element-plus，等项目所需的依赖

{"name": "vue3-hotaiguanli","version": "0.0.0","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"axios": "^1.3.3","echarts": "^4.9.0","element-plus": "^2.2.30","path": "^0.12.7","qs": "^6.11.0","vue": "^3.0.4","vue-router": "^4.1.6"},"devDependencies": {"@vitejs/plugin-vue": "^4.0.0","font-awesome": "^4.7.0","node-sass": "^6.0.1","sass": "^1.58.1","sass-loader": "^10.4.1","vite": "^4.1.0"}
}

4. 迁移，登录 and 菜单组件，保证登录功能正常运行
5. 处理菜单组件中，下拉列表的问题

根据 element-plus 组件库中进行更改

6. 逐个页面迁移组件中的属性（学生信息系列，地图系列）

---

五、步骤中的 bug 以及解决方式

1. 无法使用绝对路径，只能使用相对路径

解决方案：

使用 `vite ` 创建项目，把默认版本改为以下版本

"@vitejs/plugin-vue": "^4.0.0",
vite": "^4.1.0"

创建 vite.config.js 文件，把以下内容复制进去

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},//服务server:{// 代理proxy: {'/api': {target: 'http://1.116.64.64:5004/api2', // 代理后台服务器地址changeOrigin: true, //允许跨域rewrite: path => path.replace(/^\/api/,'') // 将请求地址中的 /api 替换成空}}}
})

---

2. 路由中找不到需要的参数

解决方案：

根据排除法找到报错的问题所在

因为在 vue3 中路由（router）中不存在 redirect 参数，所以报错，把 redirect 参数替换为 path 参数。

---

3. 在信息列表页面点击新增无法弹出提示框

解决方案：

Vue3 项目中不支持一些 基于 Vue2 版本的 element-ui 组件库的方法

点击跳转至 基于 Vue3 版本的 element-plus 组件库，当前报错问题所在

---

六、未解决的问题

1. 学生列表处存在大量警告

未解决原因：

因为不影响页面整体使用，所以无需理会。

---

总结：

欢迎大家加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

---

以上就是 Vue3 的项目重构，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog