轻松搞定，将前端项目从Vue2迁移到Vue3(下）

全面介绍从Vue 2到Vue 3迁移指南。

Java学研大本营

2745人浏览 · 2024-01-02 09:29:29

Java学研大本营 · 2024-01-02 09:29:29 发布

全面介绍从Vue 2到Vue 3迁移指南。

微信搜索关注《Java学研大本营》

3 逐步迁移指南：将您的 Vue 2 应用程序转换为 Vue 3

3.1 第 1 步：奠定基础：建立 Vue 2 项目

本文用一个示例 Vue 2 应用程序来说明迁移过程。如果您也想练习，请复制此存储库。

示例：使用 Vue2 的待办事项应用程序——从 Vue 2 迁移到 Vue 3

3.2 第 2 步：安装 Vue 的迁移构建

在安装迁移构建之前，需要检查以下几点：

将任何已弃用的命名/作用域插槽语法更新到最新版本。—单击此处获取 ref 链接。
如果您正在使用自定义 webpack，请将 vue-loader 更新到最新版本。
对于 vue-cli 用户，请将 @vue/cli-service 升级到最新版本。

接下来，请按照以下步骤操作：

将 vue 版本更新为 ^3.1.0
使用与更新版本相同的版本安装 @vue/compat，也称为 Vue 的迁移构建
将 vue-template-compiler 替换为 @vue/compiler-sfc@^3.1.0

package.json 的示例提交

"dependencies": {
-  "vue": "^2.6.14",
+  "vue": "^3.1.0",
+  "@vue/compat": "^3.1.0"
   ...
},
"devDependencies": {
-  "vue-template-compiler": "^2.6.14"
+  "@vue/compiler-sfc": "^3.1.0"
}

然后，在 *.config.js 中配置别名 vue 到 @vue/compat 和编译器选项，如下所示。

**对于 vue-cli： **

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set('vue', '@vue/compat')

    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      })
  }
}

**对于 webpack： **

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      vue: '@vue/compat'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      }
    ]
  }
}

**对于 Vite： **

// vite.config.js
export default {
  resolve: {
    alias: {
      vue: '@vue/compat'
    }
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          compatConfig: {
            MODE: 2
          }
        }
      }
    })
  ]
}

切换到迁移构建后，您将遇到运行时警告（在浏览器控制台中）和编译器警告（在命令行中）。最好先解决编译器警告，因为其中一些可能会破坏应用程序，例如使用过滤器。

示例提交：单击此处

注意：在完全迁移之前，请保留 compatConfig 选项。

3.3 第 3 步：修复迁移构建错误

迁移构建可能与 Vue 3 不完全兼容，因此启动应用程序可能无法正常工作。首先，修复过时的内容。

示例提交：单击此处

注意：有关如何解决 deprecation 的更多详细信息，请参阅第 2 节：Vue 3 中已弃用和删除的项目。

3.4 第 4 步：解决包兼容性

许多软件包现在与 Vue 3 兼容，请更新到最新版本。如果您找不到某些软件包的 Vue 3 兼容版本，请找到合适的替代品。

示例提交：单击此处

3.5 第 5 步：解决迁移构建警告

您现在可能能够执行应用程序，但还不要庆祝。还有工作要做。运行应用程序时，您将遇到如下所示的控制台警告。

这些警告需要修复。

每个警告都有一个标识符（例如 GLOBAL_MOUNT、OPTIONS_DATA_FN 等）。您可以在此处找到所有不同警告的完整列表。

示例提交：单击此处

3.6 第 6 步：迁移到 Vue 3 的组合式 API

这一步不是必需的，但建议执行。

示例提交：单击此处

3.7 第 7 步：测试和确保应用程序性能和稳定性

彻底测试已迁移的组件，以确保它们在 Vue 3 环境中的功能。利用 Vue Devtools 扩展程序在迁移期间调试和检查应用程序。

3.8 第 8 步：卸载迁移构建

测试完成并且您的应用程序在 Vue 3 中运行完美，就可以结束了！

卸载 @vue/compat 包

删除我们在 vue.config.js 开头所做的更改。

示例提交：单击此处

迁移完成！

推荐书单

《 Vue.js 3企业级项目开发实战（微课视频版）》

本书是一本实用性很强的Vue.js 3实战项目书。书中结合实际项目场景，构建了一个完整的企业级应用。全书共分13章，内容包含项目概述、Vue3项目管理、登录管理、后台主框架、图库管理、管理员管理、用户管理、商品管理、订单管理、优惠券管理、商品评论管理、分销管理和公告管理，并且讲解了这些模块的实际应用方法。同时，本书还介绍了如何使用Vite、Axios、Vue Router、Vuex等流行工具和库，以提高开发效率、提升用户体验。

《 Vue.js 3企业级项目开发实战（微课视频版）》https://item.jd.com/14140678.html