零、前言

Vue 是一个最小的前端框架,它使开发人员能够创建 web 应用、原型、大型企业应用、桌面应用和移动应用。

VUE3 是对 Vue 的完全重写,它改变了框架的所有核心 API。此重写更改了在 TypeScript 中以流形式编写的代码。在 VUE3 中,我们公开了所有的核心 API,为每个人提供了使用 Vue 的可能性。

本书首先介绍了如何在 web 开发项目中实现 Vue 3 的新功能,以及如何将现有 Vue 应用迁移到最新版本。您将使用 Vue 启动并运行 TypeScript,并从构建插件、添加状态管理、路由和开发完整的单页应用(SPA)中找到简洁的解决方案,以解决在实现组件、衍生产品和动画时遇到的常见挑战和陷阱。

本书中使用的一些库、插件和框架可能会在撰写本书和阅读本书之间收到更新。因此,请注意任何 API 更改或版本更改,这些更改可能会有任何破坏性的更改。

这本书是给谁的

这本书是为那些希望了解更多关于 Vue 的知识并希望提高其 Vue 技能的 web 开发人员编写的。我们将首先介绍 VUE3 和 TypeScript 技术。在随后的章节中,读者将了解 Vue 中的新概念及其生态系统插件、UI 框架和高级配方。

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

这本书涵盖的内容

第 1 章了解 Vue 3 并创建组件,为读者提供了如何使用新 Vue 3 API 使用 Vue 的暴露核心 API 和合成 API 创建自定义 Vue 组件的方法。本章还帮助读者了解 Vue 2 应用到 Vue 3 的初始升级路径。

第 2 章介绍 TypeScript 和 Vue 生态系统向读者介绍 TypeScript 超集及其使用方法,从基本类型、接口和类型注释开始。读者将准备好使用 Vue CLI、TypeScript 和vue-class-component开发 Vue 应用。

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

第 4 章组件、混搭和功能组件引导读者以不同的方式构建组件,包括内容定制槽、验证道具、功能组件和创建代码重用混搭。然后向读者介绍一组不同的方法来访问子组件的数据,创建依赖项注入组件和动态注入组件,以及如何延迟加载组件。

第 5 章通过 HTTP 请求从 Web 获取数据向读者展示了如何围绕 JavaScript 上 HTTP 调用的获取 API 创建自定义包装,如何在 Vue 中使用包装,以及如何在 Vue 上实现自定义异步函数。读者还将了解如何替换 axios 包装中的 FetchAPI,以及如何在 axios 上实现自定义处理程序。

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

第 7 章使用 Vuex管理应用状态,探索 Vue 状态管理插件,帮助读者了解 Vuex 如何工作以及如何将其应用于他们的应用。本章还向读者提供了创建 Vuex 模块、操作、变体和 getter 的方法,并探讨了如何定义存储的基本状态。

第 8 章使用过渡和 CSS为应用制作动画,通过提供仅基于 CSS 的自定义动画配方,探索 CSS 动画和过渡的基本原理。这些将与 Vue 自定义组件一起使用,以实现美观的应用,并为应用的用户提供最佳体验。

第 9 章使用 UI 框架创建漂亮的应用,看看流行的 UI 框架。读者将使用 Buefy、Vuetify 和 Ant Design 及其设计理念构建用户注册表单。本章介绍的方法旨在教读者如何使用 UI 框架创建美观的应用。

第 10 章将应用部署到云平台展示了如何在定制的第三方主机(如 Vercel、Netlify 和 Google Firebase)上部署 Vue 应用。使用本章中的方法,读者将了解如何使用集成的存储库挂钩和自动部署功能自动部署其应用。

第 11 章Pro League–指令、插件、SSR 等探讨了 Vue 的高级主题,包括模式、最佳实践、如何创建插件和指令,以及如何使用高级框架(如 Quasar 和 Nuxt.js)创建应用。

充分利用这本书

VUE3 测试版是在编写本书时可用的版本。所有代码都将在 GitHub 存储库的最终版本中更新,如下所示:https://github.com/PacktPublishing/Vue.js-3.0-Cookbook

您需要安装 Node.js 12+,Vue CLI 更新至最新版本,以及某种类型的良好代码编辑器。其他要求将在每个配方中介绍。所有软件要求都适用于 Windows、macOS 和 Linux。

要为 iOS 开发移动应用,您需要一台 macOS 机器来访问 Xcode 和 iOS 模拟器。下面是一个汇总所有要求的表格:

| 本书所涵盖的软件/硬件 | 操作系统要求 | | CLI 4.x 视图 | Windows/Linux/macOS | | 打字脚本 3.9.X | Windows/Linux/macOS | | 类星体 cli1.X | Windows/Linux/macOS | | Nuxt CLI 3.X.X | Windows/Linux/macOS | | Visual Studio 代码 1.4.X 和 IntelliJ WebStorm 2020.2 | Windows/Linux/macOS | | Netlify CLI | Windows/Linux/macOS | | Vercel CLI | Windows/Linux/macOS | | Firebase CLI | Windows/Linux/macOS | | Node.js 12+- | Windows/Linux/macOS | | Python 3 | Windows/Linux/macOS | | Xcode 11.4 和 iOS 模拟器 | 马科斯 |

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

下载示例代码文件

您可以从您的账户www.packt.com下载本书的示例代码文件。如果您在其他地方购买了本书,您可以访问www.packtpub.com/support并注册,将文件通过电子邮件直接发送给您。

您可以通过以下步骤下载代码文件:

  1. 登录或注册“T0”www.packt.com“T1”
  2. 选择“支持”选项卡。
  3. 点击代码下载。
  4. 在搜索框中输入图书名称,然后按照屏幕上的说明进行操作。

下载文件后,请确保使用以下最新版本解压或解压缩文件夹:

  • WinRAR/7-Zip for Windows
  • 适用于 Mac 的 Zipeg/iZip/UnRarX
  • 适用于 Linux 的 7-Zip/PeaZip

该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Vue.js-3.0-Cookbook 。如果代码有更新,它将在现有 GitHub 存储库中更新。

我们的丰富书籍和视频目录中还有其他代码包,请访问https://github.com/PacktPublishing/ 。看看他们!

使用的惯例

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

CodeInText:表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄。下面是一个示例:“将下载的WebStorm-10*.dmg磁盘映像文件作为系统中的另一个磁盘装载。”

代码块设置如下:

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

任何命令行输入或输出的编写方式如下:

$ npm run serve

粗体:表示一个新术语、一个重要单词或您在屏幕上看到的单词。例如,菜单或对话框中的单词出现在文本中,如下所示。下面是一个示例:“单击电子邮件按钮,重定向到电子邮件注册表单”

Warnings or important notes appear like this. Tips and tricks appear like this.

小节

在这本书中,你会发现几个经常出现的标题(准备就绪如何做……如何工作……还有更多……另见

要明确说明如何完成配方,请使用以下部分:

准备

本节告诉您配方中的预期内容,并介绍如何设置配方所需的任何软件或任何初步设置。

怎么做…

本节包含遵循配方所需的步骤。

它是如何工作的…

本节通常包括对上一节中发生的情况的详细解释。

还有更多…

本节包含有关配方的附加信息,以使您更了解配方。

另见

本节提供了有关配方的其他有用信息的有用链接。

联系

我们欢迎读者的反馈。

一般反馈:如果您对本书的任何方面有疑问,请在邮件主题中注明书名,并发送电子邮件至customercare@packtpub.com

勘误表:尽管我们已尽一切努力确保内容的准确性,但还是会出现错误。如果您在本书中发现错误,如果您能向我们报告,我们将不胜感激。请访问www.packtpub.com/support/errata,选择您的书籍,单击 errata 提交表单链接,然后输入详细信息。

盗版:如果您在互联网上发现我们作品的任何形式的非法复制品,请您提供我们的位置地址或网站名称,我们将不胜感激。请通过copyright@packt.com与我们联系,并提供该材料的链接。

如果您有兴趣成为一名作家:如果您对某个主题有专业知识,并且您有兴趣撰写或贡献一本书,请访问authors.packtpub.com

评论

请留下评论。一旦你阅读并使用了这本书,为什么不在你购买它的网站上留下评论呢?然后,潜在读者可以看到并使用您的无偏见意见做出购买决定,我们 Packt 可以了解您对我们产品的看法,我们的作者可以看到您对他们书籍的反馈。非常感谢。

有关 Packt 的更多信息,请访问Packt.com