阅读量:84
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对照表 