重构管理后台项目

目录

1.重构的流程、

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

2：项目整体迁移

3：重构路由，Axios, element-plus等项目所依赖的

 4：迁移，登录 and 菜单组件，保证登录功能正常运行

5：处理菜单组件中，下拉列表的问题

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

具体其中一个页面的重构代码

 2：步骤中的BUG以及解决方案

1：解决方案:

3：未解决的问题

---

前言：

因为Vue 3使用了轻量级的代码架构，并可以选择包含或不包含某些组件和功能，使得它更加灵活和可定制，并使用了新的编译器和运行时，使得它的体积更小。对于现今的微前端开发更加适合，因为它可以更快地加载和运行。

1.重构的流程、

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

vue-cli : 安装并执行 npm init vue@latest

选择项目功能时：除了第三，第四是YES其他都是NO

也可以 除了第一项的项目名字外，其他可以暂时No

cd <your-project-name>

npm install

npm run dev ：运行

npm run build: 打包 (生成一个dist文件夹)

（2） 使用vite 体验更快速

npm init vite-app <project-name>

cd <your-project-name>

npm install

npm run dev

2：项目整体迁移

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

3：重构路由，Axios, element-plus等项目所依赖的

echarts：cnpm i element-plus axios vue-router@4 echarts@4 -s

node-sass：cnpm i node-sass@6 sass-loader@10 sass -D 

path模块：npm install path --save（需要在vue.config.js中配置）

注：查看一下vite.config.js的跨域是否实现问题

一系列安装完成后的package.json和vite.config.js

main.js引用

 4：迁移，登录 and 菜单组件，保证登录功能正常运行

5：处理菜单组件中，下拉列表的问题

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

其中需要的一例就是将el-sub-menu改成el-sub-menu

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

具体其中一个页面的重构代码

 2：步骤中的BUG以及解决方案

.无法读取到文件

1：解决方案:

将文件中的所有绝对路径换成相对路径，并加上后缀名

 

 注：文件里面的引用路径也要改和不要忘记script标签中加setup

 

3：未解决的问题

 

以上就是重构的所有步骤了，感谢大家观看