Vue2升级到Vue3

       记录一下最近把项目从vue2升级到vue3的坑~！

       操作过程参考uniapp中的官网的文件进行操作uni-app官网，现在已经升级完成

       主要问题还是兼容性的修改上，首先vue3虽然推荐使用set up去写组合式的代码，但是vue2中使用的选项式可以直接copy过来使用，不会有影响。

       但是，我们平时用的组件库都是分成vue2和vue3版本的，模板部分的代码和CSS部分大部分不兼容！！！，必须进行全部替换，但像是uniapp自带的组件库可以同时兼容vue2和vue3无需进行修改。

第一步

         使用编辑器创建一个Vue3项目，默认创建的Vite项目，之前Vue2使用的Vue CLI脚手架。

         创建完成后直接把之前Vue2项目中的业务文件，Api，工具类方法复制粘贴过来，然后进行兼容性修改。（因为vue3用的Vite项目构建框架支持JS文件，无需强行修改成TS文件）

         先对vue2项目中使用的js文件进行调整，例如main.js入口文件。

// 之前 - Vue 2
import Vue from "vue";
import App from "./App";
import store from "./store"; // store
import plugins from "./plugins"; // plugins
import "./permission"; // permissionVue.use(plugins);import uView from "@/uni_modules/uview-ui";
Vue.use(uView);Vue.config.productionTip = false;
Vue.prototype.$store = store;App.mpType = "app";const app = new Vue({...App,
});app.$mount();

vue3

import { createSSRApp } from "vue";
import App from "./App.vue";import store from "./store"; // store
import plugins from "./plugins"; // plugins
import "./permission"; // permission
import uviewPlus from "@/uni_modules/uview-plus";export function createApp() {const app = createSSRApp(App);// 使用插件app.use(plugins);app.use(uviewPlus);app.use(store);// 阻止生产环境下的提示信息app.config.productionTip = false;return {app,};
}

然后把一些项目中常用的，需要导出的JS文件进行修改

// 之前 - Vue 2, 依赖如使用 commonJS 方式导出
module.exports.X = X;// 之后 - Vue 3， 只支持 ES6 模块
export default { X };

例如全局配置文件config.js

// 应用全局配置
module.exports = {baseUrl: "",// 应用信息appInfo: {// 应用名称name: "",// 应用版本version: "1.1.57",// 应用logologo: "",// 官方网站site_url: "",// 政策协议agreements: [{title: "隐私政策",url: "",},{title: "用户服务协议",url: "",},],},
};

修改后

// 应用全局配置
const config = {baseUrl: "",// 应用信息appInfo: {// 应用名称name: "",// 应用版本version: "1.1.57",// 应用logologo: "",// 官方网站site_url: "",// 政策协议agreements: [{title: "隐私政策",url: "",},{title: "用户服务协议",url: "",},],},
};export default config;

        像是之前Vue2中使用的路由守卫，网络请求api和一些方法类可以保持原来格式直接在Vue3中使用，基本上不会有兼容性问题。

修改vuex

        直接修改store中的index.js文件即可

vue2

import Vue from 'vue'
import Vuex from 'vuex'
import user from '@/store/modules/user'
import getters from './getters'Vue.use(Vuex)const store = new Vuex.Store({modules: {user},getters
})export default store

vue3

import user from "@/store/modules/user";
import getters from "./getters";import { createStore } from "vuex";const store = createStore({modules: {user,},getters,
});export default store;

第二步

调整css部分

# 卸载已安装的 node-sass
npm uninstall node-sass 
# 安装 dart-sass
npm install sass --save-dev 

       如果Vue2项目中使用的/deep/ 深度选择器已经在Vue3中弃用，如果使用/deep/进行样式修改那么需要全部进行替换，否则会报错

• SassError: expected selector. /deep/

可以把/deep/全部替换成vue3支持的伪类选择器:deep( ）

例如 /deep/ .segmented-control__item--text  修改为:deep( .segmented-control__item--text ）

第三步

调整组件库

       因为我使用的uniapp自带的组件库和uview组件库，所以只需要对uview进行升级，全部替换成uview-plus即可，相关的配置可以移步去官网的开发文档

       升级过程还是比较顺利，因为每个页面的JS部分都能复用Vue2使用的选项式代码，就是组件替换的部分比较多，暂时记录到这