使用vue3重构升级vue2项目流程与总结

//在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;

vue-router npm i vue-router@4

在main.js中引入

import router from './router'

app.use(router);

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

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
    ...
]

let router = createRouter({
    history:createWebHistory(),
    routes
})

export default router;

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

echarts npm i echarts@4 -s

//在main.js中

import echarts from 'echarts'

app.config.globalProperties.$echarts = echarts;

2.4迁移登录与菜单组件，保证登录功能正常运行

2.5逐个页面迁移组件中的属性

将组件中的选项式写法的属性与变量删除，

在script标签中加入setup，

按需引入ref(),reactive()等函数，进行数据接收，

改写computed与自定义事件的格式，

将原本的生命周期名称进行修改，如下：

vue2	------->	vue3
beforeCreate	------->	setup(()=>{})
created	------->	setup(()=>{})
beforeMount	------->	onBeforeMount(()=>{})
mounted	------->	onMounted(()=>{})
beforeUpdate	------->	onBeforeUpdate(()=>{})
updated	------->	onUpdated(()=>{})
beforeDestroy	------->	onBeforeUnmount(()=>{})
destroyed	------->	onUnmounted(()=>{})
activated	------->	onActivated(()=>{})
deactivated	------->	onDeactivated(()=>{})
errorCaptured	------->	onErrorCaptured(()=>{})

Vue2和Vue3钩子变化不大，主要是名称更改，另删除了beforeCreate 、created 两个钩子使用setup()钩子来替代。

3.重构过程中遇到的bug与问题

3.1无法使用绝对路径，只能使用相对路径

可以用../，也就相对路径来代替

或者在vite中配置，如下

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },

3.2 element-plus 版本更新带来的适配问题

3.2.1 Message更改为ElMessage

this.$message({ type: "success", message: res.data.message });
//更改后
ElMessage({ type: "success", message: res.data.message });

3.2.2 引用alert弹窗时需要引入ElMessageBox

export function delData(root, url, id, callFun) {
    root.$alert("你确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        callback: () => {
            root.service.delete(`${url}/${id}`).then((res) => {
                if (res.data.status === 200) {
                    callFun(root, url);
                    root.$message({ type: "success", message: res.data.message });
                }
            });
        },
    });
}

//更改后

import { ElMessageBox } from "element-plus";

export function delData(root, url, id, callFun) {
    ElMessageBox.alert("你确定要删除吗", "提示", {
        confirmButtonText: "确定",
        callback: () => {
            service.delete(`${url}/${id}`).then((res) => {
                if (res.data.status === 200) {
                    callFun(root, url)
                    ElMessage({ type: "success", message: res.data.message });
                }
            });
        },
    });
}

以上就是我在v2项目（后台管理系统）重构升级为v3项目时做出的总结与流程说明，希望对您有帮助~