怎样实现Vue2项目升级Vue3？

源码 · 2024-10-4 07:06:58

Vue3正式版已经发布有两年多了，现在它也已成为Vue的默认开发版本，假如你想要对之前Vue2项目进行升级重构，可以从以下几个维度入手：

① 构建工具
② 入口文件
③ 插件
④ 指令
⑤ 路由
⑥ 状态管理
⑦ 其他

一、构建工具

Vue3保举利用Vite作为构建工具，相对Webpack来说Vite超快的热更新速率能极大进步开发服从，项目越大结果越显着。
1. 安装

npm i vite -gnpm 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-viewhttps://router.vuejs.org/zh/guide/advanced/transitions.html</p>别的<keep-alive>组件在与<router-view>搭配利用时也雷同，须要用到v-slot指令，比方：
<router-viewhttps://router.vuejs.org/zh/guide/migration/index.html#%E7%A0%B4%E5%9D%8F%E6%80%A7%E5%8F%98%E5%8C%96</p>1. 安装

npm install vue-router@42. 创建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@next2. 创建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？

浏览过的版块

所属分类: 问答交流

新帖推荐: 30日

推荐作品