如何实现Vue2项目升级Vue3？
Vue3正式版已经发布有两年多了，如今它也已成为Vue的默认开发版本，如果你想要对之前Vue2项目进行升级重构，可以从以下几个维度入手：
① 构建工具
② 入口文件
③ 插件
④ 指令
⑤ 路由
⑥ 状态管理
⑦ 其他
一、构建工具
Vue3推荐使用Vite作为构建工具，相对Webpack来说Vite超快的热更新速度能极大提高开发效率，项目越大效果越明显。
1. 安装
npm i vite -g
npm create vite@latest
更多详情可以看我之前写的一篇文章 → Vue3+Vite初体验
初始项目结构大致如下：
然后我们可以将Vue2项目的src目录下的内容直接复制粘贴到新创建项目的src目录下，然后再继续接下来的重构操作。
2. 修改配置文件
默认配置文件vite.config.js如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
我们可以根据项目需求来新增一些内容，例如：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
base: './', // 开发或生产环境服务的公共基础路径
plugins: [vue()],
resolve: {
alias: { // 配置路径别名
'@': resolve('src')
},
},
css: {
preprocessorOptions: { // css预处理器
less: {
// 引入全局的Less库，有关lib.less请看 → https://www.jianshu.com/p/b13e2a2204b2
additionalData: '@import "./src/assets/less/lib.less";'
},
},
}
})
这里需要注意的是，在Vue2项目配置vue.config.js中，我们是使用CommonJs的require()语法来导入相关依赖，而在Vue3项目配置vite.config.js中我们使用的是原生ES6的import语法来导入的。
二、入口文件
1. index.html
Vite项目的HTML入口文件是放在项目根目录下的，而且需要手动引入main.js才行，而main.js就是JS的入口文件。
<script type="module" src="./src/main.js"></script>
2. main.js
① 创建并挂载根实例
我们需要在main.js创建Vue实例，而Vue3创建实例的方式与Vue2有所不同，它使用的是createApp()来创建，例如：
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
然后我们还需要将创建的实例挂载在页面上显示出来：
app.mount("#app");
需要注意的是，Vue3中的挂载方法不再是$mount()而是mount()。
② 使用路由和状态管理
如果需要用到路由和状态管理，我们还需要用到vue-router和vuex，使用use()方法来注册。
import router from "./router";
import store from "./store";
app.use(router)
.use(store);
有关router和store实例的创建，后面内容会讲到。
3. App.vue
App.vue通常是作为页面根组件，我们会在其中放置路由组件<router-view>，而页面路由切换时我们可能会给其加上一些动画效果，比如渐隐渐现，我们就可以用到内置的<transition>组件来实现，例如：
<router-view class="page" v-slot="{ Component }">
<transition name="route" mode="out-in">
<component :is="Component"></component>
</transition>
</router-view>
更多<transition>相关内容请查看 → https://router.vuejs.org/zh/guide/advanced/transitions.html
另外<keep-alive>组件在与<router-view>搭配使用时也类似，需要用到v-slot指令，例如：
<router-view class="page" v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
三、插件
插件定义方式与Vue2差不多，就是参数有所不同，例如：
export default {
install(app, options) {
// 注入一个全局可用的$isMobile()方法，用户判断是否是移动设备
app.config.globalProperties.$isMobile = () => 'ontouchstart' in window;
}
}
install()方法的第一个参数是Vue实例，我们可以向app.config.globalProperties中添加一些全局实例属性或方法，类似于Vue2中的Vue.prototype。
四、指令
我们知道v-model不仅可以用在表单组件上，还能用在自定义组件上，但是在Vue3中v-model与Vue2不同，它是modelValue属性和update:modelValue事件的组合语法糖，例如：
<CustomInput v-model="searchText" />
它相当于：
<CustomInput
:modelValue="searchText"
@update:modelValue="newValue => searchText = newValue"
/>
组件内部定义：
<!-- CustomInput.vue -->
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
</script>
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>
五、路由
Vue Router从v3到v4在迁移的过程中可能改动地方比较多，这里只是简单例举了几个常见的变化，详情可以参考官方文档 → https://router.vuejs.org/zh/guide/migration/index.html#%E7%A0%B4%E5%9D%8F%E6%80%A7%E5%8F%98%E5%8C%96
1. 安装
npm install vue-router@4
2. 创建Router实例
import { createRouter, createWebHashHistory } from "vue-router";
export default createRouter({ // 替代之前的 new Router()
history: createWebHashHistory(), // 替代之前的 mode，这里使用的是hash模式
routes: [
{
path: '/',
component: () => import("@/views/Home/index.vue")
}
],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { top: 0 }; // 以前的x改成left，y改成top
}
}
});
六、状态管理
1. 安装
npm install vuex@next
2. 创建Store实例
import { createStore } from 'vuex';
export default createStore({ // 替代之前的 new Vuex.Store()
state: {
},
mutations: {
},
actions: {
}
});
七、其他
在Vue2项目升级Vue3的过程中，除了以上列举的那些常见需要注意修改的点之外，还有一些其他需要注意的，比如Vue3中删除了filter过滤器，如果之前项目中有用到的话，需要使用computed或methods中的方法替代；删除了一些API属性和方法，如$on()、$off()、$once()、$set()、$delete()、$destroy()、Vue.exend()和$children等。
总结
最后，用一张表对本文简单地做个总结：
Vue2升级Vue3对照表
还没有任何评论，你来说两句吧