当前位置：首页 > news >正文

使用 Vue3 重构 Vue2 项目

news 2025/6/29 20:57:27

前言：

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 。（如图所示）

在这里插入图片描述

三、为什么要重构项目

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

四、重构的流程

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

使用 Vite 创建项目

项目整体迁移

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

重构路由，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"}
}

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

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

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

五、步骤中的 `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 替换成空}}}
})