Tips：首先准备一个vue2完整的项目工程和vue3的空工程（两个项目都是正常运行的）
一、 迁移文件
vue2 工程目录：
image.png
vue3 工程目录：
image.png
迁移： vue2红色框的文件可以直接复制到vue3项目中使用， 蓝色的部分是需要修改部分内容；
其中需要修改的文件有
1.vue.config.js : 入口文件mian.js -> main.ts
image.png
-
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) => {
});
}
二、 安装依赖项
- 安装 element-ui ，element-ui针对vue3.0推出了 element-plus 版本；
npm install element-plus --save
- 安装sass支持 （这里建议安装vue2 就项目中指定的版本，使用新版本可能会有版本支持问题存在）
// 如果安装时出现报错 TypeError: this.getOptions is not a function，说明就是版本问题，解决办法： 删除旧的版本，安装指定的版本或者是根据提示是webpack的配置官网修改新版本的配置方法即可；
npm install -D sass-loader node-sass
- 安装 js-cookie
npm install --save @types/js-cookie
- 安装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;
- 安装 echarts (建议安装vue2中的版本)， 如果安装版本5以上，引入方式不同
npm install echarts@4.9.0 --save
npm install --save @types/echarts
- 其他安装直接通过npm 安装旧版本的依赖即可；
- 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
- 移除废弃的@click.native语法 直接使用 @click
https://v3.cn.vuejs.org/guide/migration/v-on-native-modifier-removed.html#概览
- 移除废弃的filter语法
vue3.0 中 filters 是废弃不用的，所以在 vue3.0 中将 filters 对应的方法全部改成方法或者是计算属性的方式去调用；
- 修改废弃的生命周期的提示（临时修改，但是还没有找到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
- slot 修改(2.6之后slot的使用优化导致)
官网：https://cn.vuejs.org/v2/guide/components-slots.html#独占默认插槽的缩写语法
1. 默认slot ，直接写内容；
2. 带有参数的slot <template v-slot:name> </template> （在父组件中写），
默认是 v-slot:default
Tips： vue3中slot的修改，element-plus 中slot 的使用也发生了变更；
改成了 #name 的形式
- template 模板
在vue2 中，template 编译后是空的，所以有时候我会在一大段代码外面包裹一层这个template ，但是在 vue3 中发现，如果这个 template 既不是这个组件的 根盒子，上面又没有 v-if 、v-for、等，那么里面的元素会不出现，所以这个地方需要注意下；
-
el-popover 使用 v-popover:popover1 报错
代码：
image.png
报错：
image.png
修改之后的代码：
image.png
tips： element-plus 官方文档地址：
https://element-plus.gitee.io/#/zh-CN/component/popover
vue3 关于 v-model 和 .sync 的修改是和vue2不兼容的，对应的 element-plus 中关于 visible.sync 的用法也发生了变更，例如：el-dialog （更加详细的内容可以看element-plus 的官网和vue3 官网的介绍）
image.png
- 修改 deep 不生效的问题（？？？？ ）
官网说是改成.deep() 的方式，然而并没有用，最后我去掉了 scoped，暂时这样处理，没有找到合适的处理方式，后面找到解决方案在补充
至此项目的功能已经基础上都恢复了，不影响使用，只有一些小警告。
- element部分覆盖样式失效？
这是因为 element-plus 是完全使用 ts 重写的，所以项目中会有一些小的样式的问题，这个大部分是因为 element-plus 在重写的时候会有一些小的变更，这部分需要重新去写样式覆盖一下
四、 项目警告
- Extraneous non-emits event listeners XXX were passed to component but could not be
这个是因为emit需要提前声明一下，将报错的提示的 XXX 在emits["XXX"] 提前声明下即可
