3. vue2项目向vue3项目迁移记录

Tips：首先准备一个vue2完整的项目工程和vue3的空工程（两个项目都是正常运行的）

一、 迁移文件

vue2 工程目录：

image.png

vue3 工程目录：

image.png

迁移： vue2红色框的文件可以直接复制到vue3项目中使用， 蓝色的部分是需要修改部分内容；

其中需要修改的文件有

1.vue.config.js : 入口文件mian.js -> main.ts

image.png

2. router->index.ts history 模式下的base变成了 createWebHistory 的参数；

   
   
   

   image.png

2-1 代码中的router 的使用；

// 不在setup函数中使用 （在vue2改造的项目中如果不想大动的话，可以使用这种方式）
import Vrouter from "@/router"
const route = Vrouter.currentRoute.value
const router = Vrouter

// setup函数中使用
import { useRoute, useRouter } from "vue-router"
const router = useRouter();
const route = useRoute();

2-2 router 钩子函数改造；

setup() {
    onBeforeRouteUpdate((to) => {
    });
}

二、 安装依赖项

1. 安装 element-ui ，element-ui针对vue3.0推出了 element-plus 版本；

npm install element-plus --save

2. 安装sass支持 （这里建议安装vue2 就项目中指定的版本，使用新版本可能会有版本支持问题存在）
   // 如果安装时出现报错 TypeError: this.getOptions is not a function，说明就是版本问题，解决办法： 删除旧的版本，安装指定的版本或者是根据提示是webpack的配置官网修改新版本的配置方法即可；

npm install -D sass-loader node-sass

3. 安装 js-cookie

npm install  --save @types/js-cookie

4. 安装bus （3.0中事件 API废弃）
   如果在vue2 中使用的eventBus， 因为vue3 中废弃了这个东西，官方建议使用 mitt来替代；

// 安装 mitt
npm install  --save mitt

bus.ts

import mitt from 'mitt';
const VueEmit = mitt();

const bus:any = {
  $emit: VueEmit.emit,
  $on: VueEmit.on,
  $off:VueEmit.off
}
export default bus;

5. 安装 echarts (建议安装vue2中的版本)， 如果安装版本5以上，引入方式不同

npm install [email protected] --save
npm install --save @types/echarts

7. 其他安装直接通过npm 安装旧版本的依赖即可；
8. main.ts 文件修改

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import "@/utils/lib-flexible";

import bus from '@/utils/bus';
import axios from "@/api/axios.js";
import echarts from 'echarts';

// 导入字体库
import '@/assets/font/font.scss';
import "@/assets/css/marker.scss";

/** 重写的element-ui组件样式 */
import "@/assets/css/element_ui_modify.scss";
require("./localjson/mock.js"); // 引入mockjs,前后端分离假数据

const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
app.mount('#app')
//挂载事务总线为全局属性
app.config.globalProperties.$eventBus = bus
app.config.globalProperties.$axios = axios
app.config.globalProperties.$echarts = echarts

三、 项目运行起来前的其他修改

从vue2 迁移的修改项：官网连接
https://v3.cn.vuejs.org/guide/migration/array-refs.html

1. 移除废弃的@click.native语法 直接使用 @click

https://v3.cn.vuejs.org/guide/migration/v-on-native-modifier-removed.html#概览  

2. 移除废弃的filter语法

vue3.0 中 filters 是废弃不用的，所以在 vue3.0 中将 filters 对应的方法全部改成方法或者是计算属性的方式去调用；

3. 修改废弃的生命周期的提示（临时修改，但是还没有找到this的替代，去取消 emit 的注册）

destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount

这里需要注意的是 Vue3中的生命周期是在 setup 函数中的，setup 函数中是没有办法调用 this 的，所以在这个地方需要使用另外一个 Api 获取 data 和 methods 的内容

import { onBeforeUnmount, getCurrentInstance } from 'vue';
  setup() {
    onBeforeUnmount(()=> {
      const { ctx }= getCurrentInstance();
      ctx.clickProvinceId = null;
      CountryHomeLayerControl.removeCityIndexLayer();
      window.removeEventListener("resize", ctx .chartsDraw);
    })
  },

可以看下这个对象的内部da结构，从中取出vue2 中的 data 和methods

image.png

image.png

4. slot 修改(2.6之后slot的使用优化导致)
   官网：https://cn.vuejs.org/v2/guide/components-slots.html#独占默认插槽的缩写语法

1. 默认slot ，直接写内容；
2. 带有参数的slot  （在父组件中写），
默认是 v-slot:default

Tips： vue3中slot的修改，element-plus 中slot 的使用也发生了变更；

改成了 #name 的形式

5. template 模板

在vue2 中，template 编译后是空的，所以有时候我会在一大段代码外面包裹一层这个template ，但是在 vue3 中发现，如果这个 template 既不是这个组件的 根盒子，上面又没有 v-if 、v-for、等，那么里面的元素会不出现，所以这个地方需要注意下；

6. el-popover 使用 v-popover:popover1 报错
   代码：

   
   
   

   image.png
   
   

   报错：

   
   
   

   image.png
   
   修改之后的代码：
   
   

   image.png
   
   tips： element-plus 官方文档地址：

https://element-plus.gitee.io/#/zh-CN/component/popover

7. .sync
   官方链接：https://v3.cn.vuejs.org/guide/migration/v-model.html

vue3 关于 v-model 和 .sync 的修改是和vue2不兼容的，对应的 element-plus 中关于 visible.sync 的用法也发生了变更，例如：el-dialog （更加详细的内容可以看element-plus 的官网和vue3 官网的介绍）

image.png

8. 修改 deep 不生效的问题（？？？？ ）
   官网说是改成.deep() 的方式，然而并没有用，最后我去掉了 scoped，暂时这样处理，没有找到合适的处理方式，后面找到解决方案在补充

至此项目的功能已经基础上都恢复了，不影响使用，只有一些小警告。

9. element部分覆盖样式失效？
   这是因为 element-plus 是完全使用 ts 重写的，所以项目中会有一些小的样式的问题，这个大部分是因为 element-plus 在重写的时候会有一些小的变更，这部分需要重新去写样式覆盖一下

四、 项目警告

1. Extraneous non-emits event listeners XXX were passed to component but could not be
   这个是因为emit需要提前声明一下，将报错的提示的 XXX 在emits["XXX"] 提前声明下即可