前言：
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 替换成空
}
}
}
})
2. 路由中找不到需要的参数
解决方案：
根据排除法找到报错的问题所在
因为在 vue3 中路由（router）中不存在 redirect 参数，所以报错，把 redirect 参数替换为 path 参数。
3. 在信息列表页面点击新增无法弹出提示框
解决方案：
Vue3 项目中不支持一些 基于 Vue2 版本的 element-ui 组件库的方法
点击跳转至 基于 Vue3 版本的 element-plus 组件库，当前报错问题所在
六、未解决的问题
- 学生列表处存在大量警告
未解决原因：
因为不影响页面整体使用，所以无需理会。
总结：
以上就是 Vue3 的项目重构，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog