Vue3-秘籍-一-

布客飞龙
63 阅读15分钟

Vue3 秘籍（一）

原文：zh.annas-archive.org/md5/915E62C558C25E5846A894A1C2157B6C

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

Vue 是一个最小的前端框架，赋予开发人员创建 Web 应用程序、原型、大型企业应用程序、桌面应用程序和移动应用程序的能力。

Vue 3 是 Vue 的完全重写，并对框架的所有核心 API 进行了更改。这次重写改变了用 TypeScript 编写的代码。在 Vue 3 中，我们暴露了所有核心 API，使每个人都有可能使用 Vue。

本书从实现 Vue 3 的新功能到迁移现有 Vue 应用程序到最新版本的方法开始。您将学习如何在 Vue 中使用 TypeScript，并找到解决常见挑战和问题的简洁解决方案，从实现组件、派生物和动画，到构建插件、添加状态管理、路由和开发完整的单页应用程序（SPA）。

本书中使用的一些库、插件和框架可能会在本书编写和您阅读之间接收更新。因此，请注意任何可能导致破坏性变化的 API 更改或版本更改。

本书适合对象

这本书适用于希望了解更多关于 Vue 并希望提高他们的 Vue 技能的 Web 开发人员。我们将从介绍 Vue 3 和 TypeScript 技术开始。在接下来的章节中，读者将了解 Vue 中的新概念及其生态系统插件、UI 框架和高级技巧。

通过从头到尾地阅读本书，您将能够创建一个 Vue 应用程序，使用所有必要的 Vue 插件，并使用顶级 Vue UI 框架。如果您已经熟悉 Vue，您将发现相关的新模式。

本书涵盖内容

第一章，理解 Vue 3 和创建组件，为读者提供了如何使用新的 Vue 3 API 创建自定义 Vue 组件的方法，并使用 Vue 的暴露核心 API 和组合 API。本章还帮助读者将 Vue 2 应用程序初步升级到 Vue 3。

第二章，介绍 TypeScript 和 Vue 生态系统，向读者介绍了 TypeScript 超集以及如何使用它，从基本类型、接口和类型注解开始。读者将准备好使用 Vue CLI、TypeScript 和vue-class-component开发 Vue 应用程序。

第三章，“数据绑定、表单验证、事件和计算属性”，讨论了基本的 Vue 开发和组件概念，包括v-model、事件监听器、计算属性和for循环。读者将介绍 Vuelidate 插件用于表单验证以及如何在 Vue 组件上使用它，以及如何使用vue-devtools调试 Vue 组件。

第四章，“组件、混合和功能组件”，向读者介绍了使用不同方法构建组件，包括用于内容的自定义插槽、验证的 props、功能组件以及创建用于代码重用的混合。然后，它向读者介绍了一系列不同的方法来访问子组件的数据，创建依赖注入组件和动态注入组件，以及如何延迟加载组件。

第五章，“通过 HTTP 请求从 Web 获取数据”，向读者展示了如何在 JavaScript 上为 HTTP 调用创建 Fetch API 的自定义包装器，如何在 Vue 中使用该包装器，以及如何在 Vue 上实现自定义异步函数。读者还将学习如何在 axios 中替换包装器的 Fetch API，以及如何在 axios 上实现自定义处理程序。

第六章，“使用 vue-router 管理路由”，介绍了 Vue 的路由插件以及如何在 Vue 上使用它为 Vue 应用程序的页面创建路由。它介绍了管理路由路径的过程，路由路径上带有参数的动态路径，页面组件的延迟加载，为路由创建身份验证中间件，以及使用别名和重定向。

第七章，“使用 Vuex 管理应用程序状态”，探讨了 Vue 状态管理插件，帮助读者了解 Vuex 的工作原理以及如何应用于他们的应用程序。本章还为读者提供了创建 Vuex 模块、操作、突变和获取器的配方，并探讨了如何为存储定义基本状态。

第八章，使用过渡和 CSS 为您的应用程序添加动画，通过提供基于 CSS 的自定义动画示例，探讨了 CSS 动画和过渡的基础知识。这些将与 Vue 自定义组件一起使用，以实现一个外观漂亮的应用程序，并为应用程序的用户提供最佳体验。

第九章，使用 UI 框架创建漂亮的应用程序，介绍了流行的 UI 框架。读者将使用 Buefy、Vuetify 和 Ant-Design 构建用户注册表单，并了解它们的设计概念。本章的目的是教会读者如何使用 UI 框架创建一个外观良好的应用程序。

第十章，将应用程序部署到云平台，展示了如何在 Vercel、Netlify 和 Google Firebase 等自定义第三方主机上部署 Vue 应用程序。通过本章的示例，读者将学会如何使用集成的存储库钩子和自动部署功能自动部署他们的应用程序。

第十一章，专业联赛-指令、插件、SSR 和更多，探讨了 Vue 的高级主题，包括模式、最佳实践、如何创建插件和指令，以及如何使用 Quasar 和 Nuxt.js 等高级框架创建应用程序。

为了充分利用本书

Vue 3 beta 是撰写本书时可用的版本。所有的代码将在 GitHub 存储库的最终版本上进行更新：github.com/PacktPublishing/Vue.js-3.0-Cookbook

您需要安装 Node.js 12+，将 Vue CLI 更新到最新版本，并拥有某种良好的代码编辑器。其他要求将在每个示例中介绍。所有软件要求都适用于 Windows、macOS 和 Linux。

要开发 iOS 移动应用程序，您需要一台 macOS 机器以便访问 Xcode 和 iOS 模拟器。以下是总结所有要求的表格：

书中涵盖的软件/硬件操作系统要求
Vue CLI 4.XWindows / Linux / macOS
TypeScript 3.9.XWindows / Linux / macOS
Quasar-CLI 1.XWindows / Linux / macOS
Nuxt-CLI 3.X.XWindows / Linux / macOS
Visual Studio Code 1.4.X 和 IntelliJ WebStorm 2020.2Windows / Linux / macOS
Netlify-CLIWindows / Linux / macOS
Vercel-CLIWindows / Linux / macOS
Firebase-CLIWindows / Linux / macOS
Node.js 12+-Windows / Linux / macOS
Python 3Windows / Linux / macOS
Xcode 11.4 和 iOS 模拟器macOS

如果您使用本书的数字版本，我们建议您自己输入代码或通过 GitHub 存储库（链接在下一节中提供）访问代码。这样做将帮助您避免与复制和粘贴代码相关的任何潜在错误。

下载示例代码文件

您可以从www.packt.com的帐户中下载本书的示例代码文件。如果您在其他地方购买了本书，可以访问www.packtpub.com/support注册，直接将文件发送到您的邮箱。

您可以按照以下步骤下载代码文件：

  1. 在www.packt.com上登录或注册。

  2. 选择“支持”选项卡。

  3. 单击“代码下载”。

  4. 在搜索框中输入书名，然后按照屏幕上的说明操作。

下载文件后，请确保使用以下最新版本解压缩或提取文件夹：

  • Windows 下的 WinRAR/7-Zip

  • Mac 下的 Zipeg/iZip/UnRarX

  • Linux 下的 7-Zip/PeaZip

该书的代码包也托管在 GitHub 上，网址为github.com/PacktPublishing/Vue.js-3.0-Cookbook。如果代码有更新，将在现有的 GitHub 存储库上进行更新。

我们还有来自我们丰富图书和视频目录的其他代码包，可在**github.com/PacktPublishing/**上找到。快来看看吧！

使用的约定

本书中使用了许多文本约定。

CodeInText：表示文本中的代码词，数据库表名，文件夹名，文件名，文件扩展名，路径名，虚拟 URL，用户输入和 Twitter 句柄。 例如："将下载的WebStorm-10*.dmg磁盘映像文件挂载为系统中的另一个磁盘。"

代码块设置如下：

<template>
 <header>
 <div id="blue-portal" />
 </header>
</header>

任何命令行输入或输出都以以下方式编写：

$ npm run serve

粗体：表示新术语，重要单词或屏幕上看到的单词。例如，菜单或对话框中的单词会在文本中以这种方式出现。例如："单击电子邮件按钮，将被重定向到电子邮件注册表单"

警告或重要说明会以这种方式出现。提示和技巧会以这种方式出现。

部分

在本书中，您会经常看到几个标题（准备工作，如何做，它是如何工作的，还有更多，和另请参阅）。

为了清晰地说明如何完成食谱，请按照以下部分使用这些部分：

准备工作

本节告诉您在食谱中可以期待什么，并描述如何设置食谱所需的任何软件或初步设置。

如何做…

本节包含了遵循食谱所需的步骤。

它是如何工作的…

本节通常包括对前一节发生的事情的详细解释。

还有更多…

本节包括有关食谱的其他信息，以使您对食谱更加了解。

另请参阅

本节为食谱提供了其他有用信息的链接。

第一章：了解 Vue 3 和创建组件

Vue 3 带来了许多新功能和变化，所有这些都旨在帮助开发并改善框架的整体稳定性、速度和可维护性。借鉴其他框架和库的灵感，Vue 核心团队设法在 API 上实现了很高的抽象水平，现在任何人都可以使用 Vue，无论他们是前端开发人员还是后端开发人员。

在本章中，我们将学习如何将我们的 Vue 项目升级到新版本，以及一些新的 Vue 功能，比如多个根元素，新的属性继承引擎，我们如何在另一个应用程序中使用暴露的响应性 API，以及如何使用新的组合 API 创建组件。

在本章中，您将学习以下内容：

  • Vue 3 有什么新功能

  • 将您的 Vue 2 应用程序升级到 Vue 3

  • 使用多个根元素创建组件

  • 使用属性继承创建组件

  • 在 Vue 范围之外使用响应性和可观察 API

  • 使用组合 API 创建组件

Vue 3 有什么新功能

你可能想知道一个框架的新版本怎么会在互联网上引起如此大的轰动？想象一下把一辆汽车开上高速公路，做一个完整的 360 度翻滚，然后继续朝着同一个方向全速前进。这将引起一场戏剧性的场面，这正是描述 Vue 将从 2 版本升级到 3 版本的完美方式。

在本章的第一部分，我将向您介绍 Vue 的改进，框架中添加了什么，发生了什么变化，以及它将如何影响您编写 Vue 应用程序的方式。

框架的改进

在这个新版本中，Vue 框架有许多改进；所有这些改进都集中在尽可能使框架更好。以下是一些可能影响用户和开发人员日常开发和使用框架的改进。

底层

外壳看起来和旧的一样，但引擎是一件艺术品。在新版本中，没有留下来自 Vue 2 的代码。核心团队使用 TypeScript 从头开始构建了框架，并重写了一切，以最大程度地提高框架的性能。

选择了 TypeScript 来创建 Vue 核心团队和开源社区更易于维护的代码库，并改进自动完成功能，如 IDE 和代码编辑器提供的IntelliSense或typeahead，无需特殊的插件和扩展。

渲染引擎

对于 Vue 3，使用了一种新的算法开发了一个新的渲染引擎，用于影子 DOM。这个新的渲染引擎默认情况下完全暴露在框架的核心中，无需由框架执行。这使得可以实现一个全新的渲染函数的新实现，可以注入到框架中并替换原始的渲染引擎。

在这个新版本的 Vue 中，从头开始编写了一个新的模板编译器。这个新的编译器使用了一种新的缓存操作和管理渲染元素的新技术，并应用了一种新的提升方法来创建 VNodes。

对于缓存操作，应用了一种新的方法来控制元素的位置，其中元素可以是具有计算数据的动态元素，也可以是对可以被改变的函数的响应。

Vue 核心团队制作了一个浏览器，可以看到新模板编译器如何渲染最终的render函数。可以在vue-next-template-explorer.netlify.app/上查看。

暴露的 API

通过所有这些修改，可以在 Vue 应用程序范围之外的文件中渲染所有暴露给使用的 Vue API。可以在 React 应用程序中使用 Vue 响应性或影子 DOM，而无需在 React 应用程序内部渲染 Vue 应用程序。这种可扩展性是将 Vue 转变为更多功能的框架的一种方式，它可以在任何地方使用，不仅仅是在前端开发中。

新的自定义组件

Vue 3 引入了三个新的自定义组件，开发人员可以使用这些组件来解决旧问题。这些组件在 Vue 2 中也存在，但作为第三方插件和扩展。现在它们由 Vue 核心团队制作，并添加到 Vue 核心框架中。

片段

在 Vue 2 中，我们总是需要在单文件组件内部的组件周围有一个父节点。这是由于 Vue 2 的渲染引擎的构造方式所致，需要在每个节点上都有一个根元素。

在 Vue 2 中，我们需要有一个包装元素，封装将要呈现的元素。在这个例子中，我们有一个div HTML 元素，包装了两个p HTML 子元素，这样我们就可以在页面上实现多个元素：

<template>
 <div>
 <p>This is two</p>
  <p>children elements</p>
  </div> </template>

现在，在 Vue 3 中，可以在单文件组件中声明任意数量的根元素，而无需使用新的 Fragments API 特殊插件，它将处理多个根元素。这有助于为用户保持更清洁的最终代码，而无需为包装元素而创建空壳：

<template>
 <p>This is two</p>
  <p>root elements</p> </template>

正如我们在 Vue 3 代码中看到的，我们能够有两个根p HTML 元素，而无需包装元素。

Teleport

Teleport组件，也称为 Portal 组件，顾名思义，是一个可以使元素从一个组件移动到另一个组件的组件。这一开始可能看起来很奇怪，但它有许多应用，包括对话框、自定义菜单、警报、徽章和许多其他需要出现在特殊位置的自定义 UI。

想象一个标题组件，您希望在组件上放置一个自定义插槽，以便放置组件：

<template>
  <header>
    <div id="blue-portal" />
  </header>
</header>

然后，您想在此标题上显示一个自定义按钮，但您希望从页面上调用此按钮。您只需要执行以下代码：

<template>
  <page>
   <Teleport to="blue-portal">
     <button class="orange-portal">Cake</button>
   </Teleport>
  </page>
</template>

现在，您的按钮将显示在标题上，但代码将在页面上执行，从而访问页面范围。

悬念

当等待数据的时间比您想要的时间长时，如何为用户显示自定义加载程序？现在这是可能的，而无需自定义代码；Vue 将为您处理。Suspense组件将管理此过程，在数据加载完成后显示默认视图，并在加载数据时显示备用视图。

您可以编写一个特殊的包装器，如下所示：

<template>
  <Suspense>
    <template #default>
      <data-table />
    </template>
    <template #fallback>
      <loading-gears />
    </template>
  </Suspense>
</template>

新的 Vue 组合 API 将了解组件的当前状态，因此它将能够区分组件是正在加载还是准备好显示。

API 更改

Vue 3 进行了一些 API 更改，这些更改是为了清理 Vue API 并简化开发而必要的。其中一些是破坏性的更改，另一些是新增的。但不用担心；Vue 2 对象开发并没有被移除，它仍然存在，并将继续使用。这种声明方法是许多开发人员选择 Vue 而不是其他框架的原因之一。

Vue 3 中将出现一些重要的变化，这些变化很重要，需要更多了解。我们将讨论 Vue 3 中将引入的最重要的变化，以及如何处理它们。

在 Vue 3 中，正在引入一种创建组件的新方法——组合 API。这种方法将使您的代码更易于维护，并为您提供更可靠的代码，您将拥有 TypeScript 的全部功能。

一些较小的变化

在 Vue 3 中存在一些较小的变化，需要提及。这些变化涉及我们以前用来编写代码的一种方法，现在在使用 Vue 3 时已经被替换。这并不是一项艰巨的工作，但您需要了解这些变化。

再见过滤器，你好过滤器！Vue 过滤器 API

在 Vue 2 中，我们使用filters的方式已经不再可用。Vue 过滤器已从 API 中删除。这一变化是为了简化渲染过程并加快速度。最终，所有过滤器都是接收一个字符串并返回一个字符串的函数。

在 Vue 2 中，我们使用filters如下：

{{ textString | filter }}

现在，在 Vue 3 中，我们只需要传递一个function来操作string：

{{ filter(textString) }}
公交车刚刚离开车站！事件总线 API

在 Vue 2 中，我们能够利用全局 Vue 对象的力量创建一个新的 Vue 实例，并使用这个实例作为一个事件总线，可以在组件和函数之间传输消息而不需要任何麻烦。我们只需要发布和订阅事件总线，一切都很完美。

这是在组件之间传输数据的一个好方法，但对于 Vue 框架和组件来说是一种反模式的方法。在 Vue 中，在组件之间传输数据的正确方式是通过父子通信或状态管理，也被称为状态驱动架构。

在 Vue 3 中，$on、$off和$once实例方法已被移除。现在，要使用事件总线策略，建议使用第三方插件或框架，如 mitt（github.com/developit/mitt）。

不再有全局 Vue——挂载 API

在 Vue 2 中，我们习惯于导入 Vue，并在挂载应用程序之前，使用全局 Vue 实例来添加plugins、filters、components、router和store。这是一种很好的技术，我们可以向 Vue 实例添加任何内容，而无需直接附加到挂载的应用程序上。它的工作原理如下：

import Vue from 'vue';
import Vuex from 'vuex';
import App from './App.vue';

Vue.use(Vuex);
const store = new Vuex.store({});

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

现在，在 Vue 3 中，这是不再可能的。我们需要直接将每个component、plugin、store和router附加到挂载的实例上：

import { createApp } from 'vue';
import { createStore } from 'vuex';
import App from './App.vue';

const store = createStore({});

createApp(App)
  .use(store)
  .mount('#app');

使用这种方法，我们可以在同一个全局应用程序中创建不同的 Vue 应用程序，而不会相互干扰。

v-model，v-model，v-model - 多个 v-model

在开发单文件组件时，我们被限制为只能使用一个v-model指令和一个.sync选项来进行第二次更新更改。这意味着我们需要使用大量自定义事件发射器和巨大的对象负载来处理组件内的数据。

在这次重大变化中，引入了一个相关的破坏性变化，导致 Vue API 中的model属性被移除。这个属性用于自定义组件，以前可以做与新的 v-model 指令现在所做的相同的事情。

使用v-model指令的新方法将改变糖语法的工作方式。在 Vue 2 中，要使用v-model指令，我们需要创建一个组件，期望接收props为"value"，当有变化时，我们需要发出一个'input'事件，就像下面的代码：

<template>
  <input 
    :value="value" 
    @input="$emit('input', $event)" 
  />
</template>
<script>
export default {
  props: {
    value: String,
  },
}
</script>

在 Vue 3 中，为了使语法糖工作，组件将接收的props属性和事件发射器将发生变化。现在，组件期望一个名为modelValue的props，并发出一个名为'update:modelValue'的事件，就像下面的代码：

<template>
  <input 
    :modelValue="modelValue" 
    v-on:['update:modelValue']="$emit('update:modelValue', $event)" 
  />
</template>
<script>
export default {
  props: {
    modelValue: String,
  },
}
</script>

但是多个v-model指令呢？理解v-model的破坏性变化是了解多个v-model新方法如何工作的第一步。

要创建多个v-model组件，我们需要创建各种props，并使用'update:value'事件发出值作为模型指令的名称：

<script>
export default {
  props: {
    name: String,
    email: String,
  },
  methods: {
   updateUser(name, email) {
    this.$emit('update:name', name);
    this.$emit('update:email', email);
   }
  }
}
</script>

在我们想要使用多个v-model指令的组件中，使用以下代码：

<template>
  <custom-component
    v-model:name="name"
    v-model:email="email"
  />
</template>

组件将有每个v-model指令，绑定到子组件正在发出的事件。在这种情况下，子组件发出'update:email'（父组件）以便能够使用v-model指令与 email 修饰符。例如，您可以使用v-model:email来创建组件和数据之间的双向数据绑定。

组合 API

这是 Vue 3 最受期待的功能之一。组合 API 是创建 Vue 组件的一种新方式，以优化的方式编写代码，并在组件中提供完整的 TypeScript 类型检查支持。这种方法以更简单和更高效的方式组织代码。

在这种声明 Vue 组件的新方式中，你只需要一个setup属性，它将被执行并返回组件执行所需的一切，就像这个例子：

<template>
 <p @click="increaseCounter">{{ state.count }}</p> </template> <script> import { reactive, ref } from 'vue';   export default {
  setup(){
  const state = reactive({
  count: ref(0)
 });    const increaseCounter = () => {
  state.count += 1;
 }    return { state, increaseCounter }
 } } </script>

您将从 Vue 核心导入reactivity API，以在对象类型数据属性中启用它，例如state。ref API 可以使基本类型值（如count）具有反应性，它是一个数字。

最后，函数可以在setup函数内部声明，并在返回的对象中传递。然后，所有内容都可以在<template>部分中访问。

现在，让我们继续进行一些示例。

技术要求

在本章中，我们将使用Node.js和Vue-CLI。

注意 Windows 用户！您需要安装一个名为windows-build-tools的 NPM 包，以便能够安装以下必需的包。为此，请以管理员身份打开 Power Shell 并执行以下命令：

> npm install -g windows-build-tools

要安装 Vue-CLI，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install -g @vue/cli @vue/cli-service-global

创建基本文件

在本章的所有示例中，我们将使用这个基本模板，现在我们将创建它。确保在开始示例之前按照以下步骤创建文件：

  1. 在任何文件夹中创建一个新的.html文件并打开它。

  2. 创建一个html标签，并添加一个headHTML 元素作为子元素。在headHTML 元素内部，添加一个带有src属性定义为http://unpkg.com/vue@next的scriptHTML 元素：

<html>  <head>
 <script src="https://unpkg.com/vue@next"></script>
 </head>
</html>
  1. 作为headHTML 元素的同级，创建一个bodyHTML 元素。在bodyHTML 元素内部，添加一个带有属性id定义为"app"的divHTML 元素：
<body>
 <div id="app">
 </div>
</body>
  1. 最后，作为divHTML 元素的同级，创建一个带有空内容的scriptHTML 元素。这将是我们放置示例代码的地方：
<script></script>

将您的 Vue 2 应用程序升级到 Vue 3

将您的项目从 Vue 2 升级到 Vue 3 有时可以自动完成，但在其他情况下，需要手动完成。这取决于您在应用程序中使用 Vue API 的深度。

对于由 Vue-CLI 制作和管理的项目，这个过程将变得更加顺畅，并且与使用自定义框架包装 CLI 的项目相比，将有更加简单的方法。

在这个食谱中，您将学习如何使用 Vue-CLI 升级您的应用程序以及如何手动升级项目和依赖项。

准备工作

这个食谱的先决条件如下：

  • Node.js 12+

所需的 Node.js 全局对象如下：

  • @vue/cli

  • @vue/cli-service-global

如何做...

为了将您的 Vue 2 项目升级到 Vue 3，您将需要将升级分为不同的部分。我们有框架本身的升级，然后是生态系统组件，比如vue-router和vuex，最后是将所有内容汇总的捆绑器。

框架升级带来了一些破坏性的变化。本章的Vue 3 中的新内容部分介绍了一些破坏性的变化，还有一些可能出现在更高级的 API 模式中。您必须手动更新并检查您的组件是否适用于框架的升级。

使用 Vue-CLI 升级项目

使用最新版本的 Vue-CLI，您将能够在项目中使用 Vue 3，并且您将能够将当前项目更新到 Vue 3。

要将 Vue-CLI 更新到最新版本，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install @vue/cli-service@latest

手动升级项目

要手动升级项目，您首先需要将项目依赖项升级到它们的最新版本。您不能在 Vue 3 中使用旧版本的 Vue 生态系统插件。要做到这一点，请执行以下步骤：

  1. 我们需要升级 Vue 框架、ESLint 插件（Vue 依赖的插件）和捆绑器的vue-loader。要升级它，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：
> npm install vue@next eslint-plugin-vue@next vue-loader@next
  1. 我们需要将新的 Vue 单文件组件编译器作为项目的依赖项添加进去。要安装它，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：
> npm install @vue/compiler-sfc@latest
  1. 如果您在项目中使用单元测试和@vue/test-utils包，您还需要升级此依赖项。要升级它，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：
> npm install @vue/test-utils@next @vue/server-test-utils@latest
  1. 对于 Vue 生态系统插件，如果你使用vue-router，你也需要升级它。要升级它，你需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），并执行以下命令：
> npm install vue-router@next
  1. 如果你的应用程序使用vuex作为默认状态管理，你也需要升级它。要升级它，你需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），并执行以下命令：
> npm install vuex@next
更改起始文件

使用新版本的包，我们需要改变我们的起始文件。在使用 Vue-CLI 起始工具创建的 Vue 项目中，你会找到一个名为main.js或main.ts的文件。如果你使用 TypeScript，该文件位于src文件夹中。现在按照以下说明进行操作：

  1. 打开项目中src文件夹中的main.js文件。在文件顶部，导入包的位置，你会看到以下代码：
import Vue from 'vue';

我们需要将其更改为新的 Vue 暴露的 API 方法。为此，我们需要从 Vue 包中导入createApp，如下所示：

import { createApp } from 'vue';

  1. 从你的代码中移除全局 Vue 静态属性定义的Vue.config.productionTip。

  2. 应该改变你的应用程序的挂载函数。旧的 API 看起来像这样：

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

旧的 API 应该改为新的createApp API，如下所示：

createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

  1. 打开你的vuex存储实例化文件（通常，该文件位于src/store，命名为store.js或index.js）。

  2. 将存储的创建从实例化一个新的vuex类改为新的createStore API。vuex v3 类的实例化可能看起来像这样：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: { /* ... */ },
  mutations: { /* ... */ },
  actions: { /* ... */ },
  getters: { /* ... */ },
  modules: { /* ... */ },
});

你需要用createStore API 替换它的内容，例如：

import { createStore } from 'vuex';

export default createStore({
  state: { /* ... */ },
  mutations: { /* ... */ },
  actions: { /* ... */ },
  getters: { /* ... */ },
  modules: { /* ... */ },
});

  1. 在vue-router生态系统中，我们需要用新的 API 替换路由器创建的旧 API。为此，打开路由器创建文件（在src/router文件夹中，通常命名为router.js或index.js）。

  2. 最后，在创建文件中，用新的createRouter API 替换旧的vue-router类实例化。vue-router v3 类的实例化可能看起来像这样：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [{
    path: '/',
    name: 'HomePage',
    component: () => import('pages/home'),
  }]
});

你还需要用新的createRouter和createWebHistory API 替换new VueRouter的实例化，就像这个例子一样：

import {
  createRouter,
  createWebHistory,
} from 'vue-router';

Vue.use(VueRouter);

export default createRouter({
  history: createWebHistory(),
  routes: [{
    path: '/',
    name: 'HomePage',
    component: () => import('pages/home'),
  }]
});

它是如何工作的...

在升级过程中，Vue 为我们提供了两种更新项目的方式。第一种方式是使用 Vue-CLI 插件，它试图自动化几乎所有升级所需的过程和更改。

第二种方法是手动升级项目。这种方法需要开发人员将所有依赖项升级到最新版本，安装新的单文件组件编译器@vue/compiler-sfc，并将 Vue 应用程序、路由器和存储的入口文件更改为新的 API。

在项目的起始结构更改后，开发人员需要检查组件，看看是否存在任何 Vue 3 破坏性更改，将组件重构为新的 Vue 3 API，并从 Vue 2 中删除已弃用的 API。

创建具有多个根元素的组件

在 Vue 3 中，可以创建具有多个根元素的组件，无需包装元素。这个选项也被称为片段。

在 React 中，这已经很久了，但在 Vue 中，您需要使用自定义的第三方插件，如vue-fragment（github.com/Thunberg087/vue-fragment）来使用此功能。

在这个教程中，您将学习如何创建一个具有多个根元素的组件，以及如何将其与<template>部分和render函数一起使用。

如何做...

在这个教程中，我们将创建两个多个根元素组件的示例，一个是使用<template>结构，另一个是使用render函数。为了做到这一点，这个教程将分为两部分。

使用

avatar
文章
阅读
粉丝