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"] 提前聲明下即可
