零、前言

本学习路径分为三个部分,每个部分都让您更接近使用 Vue.js 2 开发高端现代 web 应用。它从构建示例应用开始,以熟悉 Vue.js 生态系统。您将通过创建三个单页应用来学习使用 Vue.js,这些应用探索 Vuex 和 Vue router,这是用于缓存数据和为应用路由 URL 的标准 Vue 工具。进一步说,学习路径将解决使用 Vue.js 设计 web 应用时遇到的一些挑战。

学习路径将提供易于遵循的方法,帮助您应对挑战并打造动态前端。您将学习集成 Babel 和 Webpack 等 web 实用程序,以增强您的开发工作流程。最后,本课程将向您介绍几种设计模式,以帮助您使用 Vue 框架编写干净、可维护和可重用的代码。

在学习之路的最后,您将对利用 Vue.js 的所有组件和生产力功能的专业知识充满信心,并将开始设计 web 应用,并通过编写干净的代码来执行它。

这本书是给谁的

该学习路径面向希望学习 Vue.js 并使用最新 Vue.js 功能开发高效 web 应用的任何专业级别的 JavaScript 开发人员。

这本书涵盖的内容

第一章Vue.js 入门,展示了如何通过包含 JavaScript 文件开始 Vue。然后,我们开始初始化第一个 Vue 实例,查看数据对象,检查计算函数和属性,最后学习 Vue 方法。

第 2 章显示、循环、搜索和过滤数据,描述了如何使用 Vue 使用v-ifv-elsev-for.显示列表和更复杂的数据,然后介绍了如何使用表单元素过滤列表,然后根据数据应用条件 CSS 类。

第三章优化我们的应用并使用组件显示数据是关于通过减少重复和逻辑组织代码来优化我们的 Vue.js 代码。完成后,将介绍如何创建 Vue 组件并将其与 Vue 一起使用,如何与组件一起使用道具和插槽,以及如何利用事件在组件之间传输数据。

第 4 章使用 Dropbox API获取文件列表,显示加载和查询 Dropbox API,并列出您 Dropbox 帐户中的目录和文件。然后,它将考虑在使用 Vue 动画的同时向应用添加加载状态。 

第 5 章浏览文件树并从 URL加载文件夹,说明如何为文件和文件夹创建一个组件,并添加到文件夹组件的链接以更新目录列表。它还介绍了如何向文件组件添加下载按钮和创建面包屑组件,以便用户可以轻松地导航到树上并动态更新浏览器 URL,从而在文件夹被书签或链接共享时加载正确的文件夹

第 6 章使用 Vuex缓存当前文件夹结构,展示了如何开始使用 Vuex 以及从 Vuex 存储中存储和检索数据。然后介绍如何将 Vuex 与我们的 Dropbox 应用集成,如何缓存当前 Dropbox 文件夹的内容,以及在需要时从应用商店加载数据。

第 7 章预缓存其他文件夹和文件,以实现更快的导航,描述了预缓存文件夹的过程,存储父文件夹的内容,以及如何缓存文件的下载链接。

第 8 章介绍 Vue 路由和加载基于 URL 的组件,探讨 Vue 路由初始化及其选项,以及如何创建与 Vue 路由的链接。然后介绍如何根据 URL 创建动态路由以更新视图。从这里开始,它描述了如何将道具与 URL、嵌套和命名路由一起使用,以及如何以编程方式进行导航。

第 9 章使用 Vue 路由动态路由加载数据,是关于概述我们的组件和路由,加载产品 CSV 文件,并创建带有图像和产品变体的单个产品页面。

第 10 章建立电子商务商店,浏览产品介绍了如何创建特定产品的首页列表页面,创建具有可重用组件的分类页面,创建订购机制,动态创建过滤器,并允许用户过滤产品。

第 11 章建立一个电子商务商店,增加一个结帐,是关于建立允许用户向购物篮添加和移除产品、允许用户结帐并添加订单确认页面的功能。

第 12 章使用 Vue 开发工具和测试 SPA介绍了 Vue 开发工具在我们开发的应用中的使用,并概述了测试工具和应用。

第 13 章过渡和动画,学习过渡和动画如何为应用带来更多活力。您还将与外部 CSS 库集成。

第 14 章Vue 与互联网通信是您第一次调用 AJAX 并创建表单和成熟的 REST 客户端(和服务器!)

第 15 章单页应用使用 vue 路由创建静态和动态路由,创建现代 SPA。

第 16 章Organize+Automate+Deploy=Webpack是您向 npm 发布精心制作的组件的地方,您可以了解 Webpack 和 Vue 在这个过程中是如何协同工作的。

第 17 章Advanced Vue.js是您探索指令、插件、功能组件和 JSX 的地方。

第 18 章Vuex 大型应用模式是您使用 Vuex 测试模式构建应用的地方,以确保您的应用可维护且性能良好。

第 19 章与其他框架的集成,是您使用 Vue 和 Electron、Firebase、Feather 和 Horizon 构建四个不同应用的地方。

第 20 章Vue 路由模式描述了路由是任何 SPA 中至关重要的一部分。本章重点介绍 Vue 路由,并介绍如何在多个页面之间路由用户。它涵盖了从匹配路径和组件到使用导航参数、正则表达式等进行动态匹配的所有内容。

第 21 章使用 Vuex 进行状态管理演示了使用 Vuex 进行状态管理。本文首先介绍通量体系结构和单向数据流。然后,我们来看看 Vuex,一个针对 Vue 的状态管理系统。本章还将介绍如何在应用中实现这一点,以及常见的陷阱和使用模式。它接着进入Vue-devtools以捕获操作和 Vue 实例数据。

充分利用这本书

对于本书,读者将需要以下内容:

  • 用于编写代码的文本编辑器或 IDE。它可以像记事本或文本编辑一样简单,但建议使用带有语法突出显示的工具,如 Sublime 文本、Atom 或 Visual Studio 代码。
  • 网络浏览器。
  • 具有文件和文件夹的 Dropbox 用户帐户。

下载示例代码文件

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

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

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

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

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

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

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

使用的惯例

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

文本中的代码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄如下所示:“只需将要激活的层的名称分配给VK_INSTANCE_LAYERS环境变量即可。”

代码块设置如下:

<div id="app">
        {{ calculateSalesTax(shirtPrice) }}
      </div>

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

$ npm install
$ npm run dev

粗体:新术语和重要词语以粗体显示。您在屏幕上(例如,在菜单或对话框中)看到的文字将显示在如下文本中:“从管理面板中选择系统信息”

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

联系

我们欢迎读者的反馈。

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

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

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

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

评论

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

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