零、序言
Vue 是一个具有巨大生态系统的领先框架，由于其在开发应用时易于使用，并且能够帮助您在快速开发过程中取得令人印象深刻的成果，因此其采用率不断提高。本书探讨了最新的 Vue 版本 Vue 3.0，以及如何有效地利用它。
您将通过基于示例的方法学习，首先通过创建一个简单的应用来探索 Vue 3 的基础知识，并了解组件、指令及其用法等功能。为了积累知识并使您对应用构建技能充满信心，本书将向您展示如何使用 Jest 和 Vue 测试 UTIL 测试该应用。稍后，您将学习如何使用 Vue 3 编写非 web 应用，以及如何使用 Electron 插件创建跨平台桌面应用。您还将学习如何使用 Vue 和 Ionic 创建多用途移动应用。随着您的进步，您将学习如何使用 Vue 3 开发与 GraphQL API 良好交互的 web 应用。最后，您将构建一个实时聊天应用，使用 Vue 3 和 Laravel 执行实时通信。
在本书结束时，您将通过使用 Vue 3 完成一系列应用构建项目，从而掌握所需的实际技能。
这本书是给谁的
本书面向对使用 Vue 3 学习前端 web 开发和使用 Vue 3 创建专业应用感兴趣的 web 开发人员。如果您想学习如何使用 Vue.js 3.0 作为前端创建全堆栈 web 应用，您也会发现本书很有用。要充分利用本书，需要具备基本 JavaScript 编程的先验知识。
这本书涵盖的内容
第 1 章在 Vue 3中创建您的第一个应用，将介绍如何使用 Vue 3 创建简单的应用。您将从构建最基本的应用开始，然后继续构建更复杂的解决方案。
第 2 章构建 Vue 3 渐进式 Web 应用，将教您如何使用 Vue 3 创建 GitHub渐进式 Web 应用PWA。在构建项目时，您将通过深入查看基本构建块来检查 Vue 应用的内部工作方式。您将使用组件创建 Vue 应用，并查看组成组件的部件及其工作方式。
第 3 章通过测试构建一款滑块益智游戏，通过让您使用 Vue 3 创建一款简单游戏，向您介绍 Vue。您将学习如何使用要添加到项目中的不同方法、混合、指令和计算属性。
第 4 章创建照片管理桌面应用，将帮助您使用 Vue Electron 插件构建照片管理桌面应用。您将学习如何使用 Electron 和 Vue 轻松构建跨平台桌面应用。
第 5 章使用 Ionic构建多用途计算器移动应用，将看到您使用 NativeScript 创建多用途计算器移动应用。您将使用 Vuex 管理状态并保存结果数据，以便以后在本地存储中使用。最后，您将掌握货币换算、单位换算和 tips 计算。
第 6 章使用 PrimeVue UI 框架构建度假预订应用，将教会您如何创建具有管理功能的旅游预订应用。管理端将是一个仪表板，供用户管理预订。它将涉及使用状态管理和路由来创建一个成熟的应用。后端将很简单，因此您可以更加关注 Vue。还需要使用 Vuex 进行状态管理，并使用 Vue 路由进行路由。
第 7 章使用 GraphQL创建购物车系统，将帮助您创建 Vue 3 应用并与 GraphQL API 一起使用。您将学习如何在我们的 Vue 3 应用中使用 GraphQL 客户端。该 API 将具有查询、突变和数据库交互，您将学习如何使用 Express 创建 GraphQLAPI。
第 8 章构建一个包含 Vue 3、Socket.IO 和 Socket.IO的聊天应用，将教会您如何创建包含 Vue 3、Socket.IO 和 Laravel 的聊天应用。此应用将发出 HTTP 请求并进行实时通信。它可以由多个用户使用。
充分利用这本书
要充分利用本书，您应该了解现代 JavaScript 的基础知识。了解如何使用从 2015 年开始引入的 JavaScript 功能编程将使理解本书变得更加容易。第 5 章将使用基本的 TypeScript 概念，如定义接口和高级数据类型，使用 Ionic构建多用途计算器移动应用。
此外，第 8 章构建一个包含 Vue 3、Laravel 和 Socket.IO的聊天应用涵盖了 Laravel，这需要对 PHP 有基本的了解。更高级项目的后端部分还需要理解非常基本的 SQL 语法。像[T0]、[T1]和[T2]这样的命令会很有帮助。
其他需要的是 Node.js 的最新版本和 Visual Studio 代码。VisualStudio 代码支持现成的 JavaScript 和 TypeScript 开发。运行 Vue CLI 和 Ionic CLI 需要 Node.js。
读完这本书后，你应该尝试通过创建自己的项目来进行更多的练习。这样，你将利用你从这本书中获得的知识。从教程中学习只是一个开始；自己创建项目将使您精通。
如果您使用的是本书的数字版本，我们建议您自己键入代码或通过 GitHub 存储库访问代码（下一节提供链接）。这样做将帮助您避免与复制和粘贴代码相关的任何潜在错误。
下载示例代码文件
您可以从您的账户www.packt.com下载本书的示例代码文件。如果您在其他地方购买了本书，您可以访问www.packtpub.com/support并注册，将文件通过电子邮件直接发送给您。
您可以通过以下步骤下载代码文件：
- 登录或注册“T0”www.packt.com“T1”
- 选择支持选项卡。
- 点击代码下载。
- 在搜索框中输入图书名称，然后按照屏幕上的说明进行操作。
下载文件后，请确保使用以下最新版本解压或解压缩文件夹：
- WinRAR/7-Zip for Windows
- 适用于 Mac 的 Zipeg/iZip/UnRarX
- 适用于 Linux 的 7-Zip/PeaZip
该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/-Vue.js-3-By-Example 。如果代码有更新，它将在现有 GitHub 存储库中更新。
我们的丰富书籍和视频目录中还有其他代码包，请访问https://github.com/PacktPublishing/ 。看看他们！
使用的约定
本书中使用了许多文本约定。
Code in text：表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄。下面是一个示例：“将下载的WebStorm-10*.dmg磁盘映像文件作为系统中的另一个磁盘装载。”
代码块设置如下：
html, body, #map {
height: 100%;
margin: 0;
padding: 0
}
当我们希望提请您注意代码块的特定部分时，相关行或项目以粗体显示：
[default]
exten => s,1,Dial(Zap/1|30)
exten => s,2,Voicemail(u100)
exten => s,102,Voicemail(b100)
exten => i,1,Voicemail(s0)
任何命令行输入或输出的编写方式如下：
$ mkdir css
$ cd css
粗体：表示一个新术语、一个重要单词或您在屏幕上看到的单词。例如，菜单或对话框中的单词出现在文本中，如下所示。下面是一个示例：“从管理面板中选择系统信息
提示或重要提示
看起来像这样。
联系
我们欢迎读者的反馈。
一般反馈：如果您对本书的任何方面有疑问，请在邮件主题中注明书名，并发送电子邮件至customercare@packtpub.com。
勘误表：尽管我们已尽一切努力确保内容的准确性，但还是会出现错误。如果您在本书中发现错误，如果您能向我们报告，我们将不胜感激。请访问www.packtpub.com/support/errata，选择您的书籍，单击 errata 提交表单链接，然后输入详细信息。
盗版：如果您在互联网上发现我们作品的任何形式的非法复制品，请您提供我们的位置地址或网站名称，我们将不胜感激。请致电与我们联系 copyright@packt.com带有指向该材料的链接。
如果您有兴趣成为一名作家：如果您对某个主题有专业知识，并且您有兴趣撰写或贡献一本书，请访问authors.packtpub.com。
审查
请留下评论。一旦你阅读并使用了这本书，为什么不在你购买它的网站上留下评论呢？然后，潜在读者可以看到并使用您的无偏见意见做出购买决定，我们 Packt 可以了解您对我们产品的看法，我们的作者可以看到您对他们书籍的反馈。非常感谢。
有关 Packt 的更多信息，请访问Packt.com。
版权属于：月萌API www.moonapi.com，转载请注明出处
