宽城区网站建设seo培训优化
目录
- 前言：
- 一、项目整体效果展示
- 二、项目下载使用方法
- 三、为什么要重构项目
- 四、重构的流程
- 五、步骤中的 `bug` 以及解决方式
- 六、未解决的问题
- 总结：
前言：
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 组件库，当前报错问题所在
六、未解决的问题
- 学生列表处存在大量警告
未解决原因：
因为不影响页面整体使用，所以无需理会。
总结：
欢迎大家加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003
以上就是 Vue3 的项目重构，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog