Vue2项目后台管理重构为Vue3的流程与总结

目录

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

二、将项目中的组件，封装的js整体迁移过来

三、重构路由，axios，element-plus等项目所需要的依赖        

四、将组件的选项式写法删除，在script里加入setup语法糖，按需引入ref，computed等来定义数据和方法

五、项目迁移中一些BUG 

---

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

第一种方法(Vue-Cli)

通过指令:npm init vue@latest 

除了第一项的项目名字外，其他可以暂时默认回撤或者选择 No

切换到项目目录：cd <your-project-name>

安装项目依赖：npm install

启动开发服务器：npm run dev

将应用发布到生产环境：npm run build

第二种方法(Vite)

npm init vite-app <项目名称>

cd <project-name>

npm install

npm run dev

创建后在package.json里检查vite版本，如果版本过低，手动改为4.1.0，然后去文件夹中删除node_modules，删掉旧版本的依赖，在通过npm i下载匹配版本的node_modules

 在项目同级下创建vite.config.js

二、将项目中的组件，封装的js整体迁移过来

三、重构路由，axios，element-plus等项目所需要的依赖        

饿了么: npm install element-plus --save

在main.js中引入

import ElementPlus from 'element-plus'

国际版翻译      import locale from '../node_modules/element-plus/es/locale/lang/zh-cn'

import 'element-plus/dist/index.css'

app.use(ElementPlus, { locale });

axios： npm i axios

在main.js中引入

import axios from 'axios'

app.config.globalProperties.$https = axios;

app.configapp.config.globalProperties是一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。是Vue2中Vue.prototype使用的一种替代.

vue-router  npm i vue-router@4

在main.js中引入

import router from './router'

app.use(router);

在src下新建一个router文件夹，文件夹下新建index.js，配置路由信息

​

 echarts   npm i echarts@4 -s

在main.js中

import echarts from 'echarts'

app.config.globalProperties.$echarts = echarts;

sass   npm i node-sass@6 sass-loader@10 sass -D 

四、将组件的选项式写法删除，在script里加入setup语法糖，按需引入ref，computed等来定义数据和方法

通过ref来定义数据

 引入computed来定义计算属性

用funtion来定义方法

五、项目迁移中一些小难点

1.无法使用绝对路径

可以使用相对路径../来代替

或者在vite.config.js里配置

2.无法使用this

例如学生列表页面，由于页面一刷新就需要去请求数据来渲染页面，但是请求数据需要把this当作参数传递过去，但是v3中不能使用this，此时就会报错

这里的root接收的是this，但是this在v3不存在，所以会报错

由于这个函数所需要的只是this中所声明的响应式数据，所以可以把这些响应式数据封装成组件传递过来 ，就可以解决

 

 

3.分页组件的传参

由于分页是很常见的功能所以可以把它封装为组件进行复用

页面调用分页组件后，立即去封装的js文件获取数据，然后把数据映射为自己的属性，但是，由于v3没有this，所以可以使用project和inject进行通信，把页面的属性传递给分页组件，然后把这些响应式数据封装为对象,作为参数传递给函数。

另一方面由于该组件频繁调用getTableData，所以可以把这个方法封装在该组件的funtion中，来频繁调用。在请求到数据后，对其 进行赋值，由于该数据是响应式的，所以它的值会直接改变。值发生变化后，页面的数据发生改变，并且通过props的把父组件的数据传递给分页组件，分页组件接受到数据后把这些值渲染到HTML上，这样就完成了分页组建的封装