零、前言

作为一个相对较新的 UI 库,Vue 对当前领先的库(如 Angular 和 React)来说是一个非常严峻的挑战。它提供了很多功能——它简单、灵活、速度非常快,但它仍然提供了构建全面的现代 web 应用程序所需的所有功能。

它的渐进性使它很容易开始使用,然后你可以使用更先进的功能来扩展你的应用程序。Vue 周围还有一个丰富的生态系统,包括用于路由和状态管理、引导和单元测试的官方第一方库。Vue 甚至支持服务器端即时渲染!

所有这一切都是可能的,这要归功于一个令人惊叹的社区和一个令人敬畏的核心团队,他们推动了网络创新,并使 Vue 成为一个可持续的开源项目。

为了帮助您学习 Vue 并使用它构建应用程序,本书由六个指南组成。每个指南都是一个具体的项目,您将自己构建一个真正的应用程序。这意味着您将有六个 Vue 应用程序在年底前启动并运行!

与 Vue 一样,项目是渐进式的,并逐步引入新主题,以使您的学习体验更轻松。第一个项目不需要大量的配置或构建工具,因此您可以立即制作具体的应用程序。然后,更高级的主题将逐步添加到项目中,以便您在本书结束时拥有完整的技能集。

这本书涵盖的内容

第一章是 Vue入门,介绍了如何通过指令创建具有动态模板和基本交互性的基本 Vue 应用程序。

第 2 章、项目 1——Markdown 笔记本探讨了创建完整的 Vue 应用程序的过程,该应用程序具有计算属性、方法、生命周期挂钩、列表显示、DOM 事件、动态 CSS、模板条件和过滤器格式等功能。

第 3 章、项目 2——城堡决斗浏览器游戏解释了如何创建一个浏览器卡片游戏,该游戏以可重用组件树的形式构建,这些组件相互通信。它还具有动画和动态 SVG 图形。

第 4 章【高级项目设置】重点介绍如何使用 Vue 官方命令行工具,使用 webpack、babel 和更多构建工具引导一个完整的项目。它还涵盖了单文件组件格式,允许读者将组件创建为构建块。

第 5 章、项目 3-支持中心带您了解如何使用官方路由库构建多页面应用程序——嵌套路由、动态参数、导航卫士等。该项目还具有自定义用户登录系统。

第 6 章、项目 4——地理定位博客介绍了一个应用程序的创建过程,该应用程序以谷歌 OAuth 登录和谷歌地图 API 为特色。本章还介绍了使用官方 VueX 库以及 fast 功能组件进行状态管理的重要主题。

第 7 章、项目 5——在线商店和扩展概述了先进的开发技术,如使用 ESLint 检查代码质量、使用 Jest 对 Vue 组件进行单元测试、将应用程序翻译成多种语言、使用服务器端渲染提高速度和 SEO。

第 8 章,项目 6——Meteor 实时仪表板教您如何在 Meteor 应用程序中使用 Vue,以充分利用此全堆栈框架的实时功能。

这本书你需要什么

要阅读本书,您只需要一个文本或代码编辑器(建议使用 Visual Studio 代码和 Atom)和一个 web 浏览器(最好使用最新版本的 Firefox 或 Chrome 作为开发工具)。

这本书是给谁的

如果您是一名 web 开发人员,现在希望使用 Vue.js 创建丰富的交互式专业应用程序,那么本书适合您。假定您有 JavaScript 方面的先验知识。熟悉 HTML、Node.js 以及 npm 和 webpack 等工具会有所帮助,但不是必需的。

习俗

在这本书中,你会发现许多不同类型的文本可以区分不同类型的信息。下面是这些风格的一些例子,并解释了它们的含义。

文本中的代码如下所示:“我们可以通过d3.select函数选择 HTML 元素。”

代码块设置如下:

class Animal
{
public:
virtual void Speak(void) const //virtual in the base class
{
  //Using the Mach 5 console print
  M5DEBUG_PRINT("...\n");
}
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Clicking the Next button moves you to the next screen."

警告或重要注释显示在这样的框中。

提示和技巧如下所示。

读者反馈

我们欢迎读者的反馈。让我们知道你对这本书的看法你喜欢或可能不喜欢什么。读者反馈对于我们开发您真正从中获益最多的标题非常重要。

要向我们发送一般反馈,只需向feedback@packtpub.com发送电子邮件,并通过邮件主题提及书名即可。

如果您对某个主题有专业知识,并且您有兴趣撰写或贡献一本书,请参阅我们的作者指南,网址为www.packtpub.com/authors

客户支持

既然您是一本 Packt 图书的骄傲拥有者,我们有很多东西可以帮助您从购买中获得最大收益。

下载示例代码

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

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

  1. 使用您的电子邮件地址和密码登录或注册我们的网站。
  2. 将鼠标指针悬停在顶部的“支持”选项卡上。
  3. 点击代码下载和勘误表。
  4. 在搜索框中输入图书的名称。
  5. 选择要下载代码文件的书籍。
  6. 从您购买本书的下拉菜单中选择。
  7. 点击代码下载。

您也可以通过点击 Packt Publishing 网站上书籍网页上的“代码文件”按钮下载代码文件。可以通过在搜索框中输入图书名称来访问此页面。请注意,您需要登录到您的 Packt 帐户。

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

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

该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Vue-js-2-Web-Development-Projects 。我们的丰富书籍和视频目录中还有其他代码包,请访问https://github.com/PacktPublishing/ 。看看他们!。

下载本书的彩色图像

我们还提供了本 PDF 文件中使用的彩色图像截图。彩色图像将帮助您更好地了解输出中的更改。您可以从下载此文件 https://www.packtpub.com/sites/default/files/downloads/Vuejs2WebDevelopmentProjects_ColorImages.pdf

勘误表

虽然我们已尽一切努力确保内容的准确性,但错误确实会发生。如果您在我们的一本书中发现错误,可能是文本或代码中的错误,如果您能向我们报告,我们将不胜感激。通过这样做,您可以使其他读者免于沮丧,并帮助我们改进本书的后续版本。如果您发现任何错误,请访问进行报告 http://www.packtpub.com/submit-errata ,选择您的书籍,点击勘误表提交表单链接,然后输入勘误表的详细信息。一旦您的勘误表得到验证,您的提交将被接受,勘误表将上载到我们的网站或添加到该标题勘误表部分下的任何现有勘误表列表中。

要查看之前提交的勘误表,请转至https://www.packtpub.com/books/content/support并在搜索字段中输入图书名称。所需信息将出现在勘误表部分下。

盗版行为

在互联网上盗版版权材料是所有媒体都面临的一个持续问题。在 Packt,我们非常重视版权和许可证的保护。如果您在互联网上发现任何形式的非法复制品,请立即向我们提供地址或网站名称,以便我们采取补救措施。

请致电copyright@packtpub.com与我们联系,并提供可疑盗版材料的链接。

我们感谢您在保护我们的作者方面提供的帮助以及我们为您带来有价值内容的能力。

问题

如果您对本书的任何方面有任何问题,可以通过questions@packtpub.com与我们联系,我们将尽力解决该问题。