前言:
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
。(如图所示)
![](/qrcode.jpg)
三、为什么要重构项目
使代码更容易理解,方便后期维护,也就是要让每个模块的定位清晰明确
发现隐藏的代码缺陷
代码风格要优雅~,内容质量高,按照合理的设计模式和编程思想去重构
同步新的需求
项目功能交互来个极致体验,功能上要要尽量做到不卡顿 不闪退,要满足产品需求的细节
从长远来看,可以提高编程效率
四、重构的流程
- 新建项目,确定脚手架版本
使用
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