前言

作为一个相对较新的UI库，Vue对于当前主流的JavaScript库（如Angular和React）来说有很大的威胁。Vue有很多优点：易用、灵活、速度快，并且为构建完整的现代Web应用提供了所需的所有功能。

Vue渐进式的特点使得开发者能够轻松上手，然后使用更高级的功能对应用进行扩展。Vue还具有一个丰富的生态系统，包括官方提供的一些库，用于路由、状态管理、脚手架（vue-cli）和单元测试。Vue甚至开箱即用地支持服务端渲染。

这一切都要归功于一个令人惊叹的社区，以及一支了不起的核心团队。是他们推动着Web技术的创新，并使得Vue成为一个可持续发展的开源项目。

为了帮助开发者学习Vue并利用Vue构建应用，本书由6个指南构成。每个指南都是一个具体的项目。在学习每个项目时，开发者将自己动手构建一个实际的应用。这也就意味着，学完本书时，开发者将拥有6个可以运行的Vue应用。

就如Vue一样，书中的这些项目也是渐进式的，一步一步引入新的知识点，使得开发者能轻松地掌握Vue。第一个项目不需要太多配置和构建工具，所以开发者可以立即构建出一个实际的应用。接着，更高级的知识点会被逐步引入项目中。当学完本书时，开发者将拥有一套完整的Vue开发技能。

本书涵盖的内容

第1章，Vue开发入门。这一章介绍如何利用动态模板创建一个基本的Vue应用，以及如何通过指令实现基本的交互。

第2章，项目1：Markdown笔记本。这一章探索创建一个完整的Vue应用要使用的功能，例如计算属性、函数、生命周期钩子、列表渲染、DOM事件、动态CSS、模板条件和过滤器格式化等。

第3章，项目2：城堡决斗游戏。这一章阐述浏览器卡牌游戏的创建，其结构如同一棵树，由可以相互通信且可复用的组件组成。该游戏还拥有动画和动态的SVG图形。

第4章，高级项目配置。这一章关注如何使用官方提供的Vue命令行工具（CLI），根据CLI的向导使用Webpack、Babel以及更多构建工具来构建一个完整的项目。同时还介绍了单文件组件的格式，让开发者能够创建组件作为构建块。

第5章，项目3：支持中心。这一章介绍如何利用官方路由库来组织一个多页面应用，涉及嵌套路由、动态参数和导航守卫等。此项目还拥有自定义用户登录系统。

第6章，项目4：博客地图。这一章带你创建一个利用Google OAuth登录和Google Maps API的应用。还介绍了利用官方提供的VueX库进行状态管理，以及快速功能组件等重要内容。

第7章，项目5：在线商店以及扩展。这一章概述一些高级开发技术。例如，使用ESLint做代码质量检查，使用Jest对Vue组件进行单元测试，将应用翻译为多语言，以及使用服务端渲染技术提高速度和解决搜索引擎优化（SEO）的问题。

第8章，项目6：使用Meteor开发实时仪表盘。这一章教你如何在Meteor应用中使用Vue，以利用这个全栈框架的实时处理功能。

本书需要的工具

学习本书的过程中，你只需要一个文本编辑器或代码编辑器（推荐使用Visual Studio Code和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
{
  // 使用Mach 5控制台输出
  M5DEBUG_PRINT("...\n");
}

新的术语和重要的词语将以黑体形式显示。在屏幕上（如菜单或对话框中）出现的文字按照如下样式显示：“单击按钮Next将打开下一个界面。”

　此图标表示警告或重要提示。

　此图标表示提示或小技巧。

读者反馈

欢迎读者随时进行反馈，告诉我们你对本书的想法——喜欢或者不喜欢都可以。读者反馈对我们来说非常有用。

一般的反馈可以发送到电子邮箱[email protected]，请在邮件标题中提及书名。

如果你精通某一领域，并有意向参与相关图书的编写，请查看我们的作者指南：。

客户支持

现在你已经是Packt图书（本书）的拥有者了，我们为你提供了许多物超所值的内容。

下载示例代码

用你的账号登录，可以下载本书的示例代码文件。如果是从其他渠道购买，可以打开网址，注册之后，我们会将文件通过电子邮件直接发送给你。

可以按照如下步骤下载代码文件。

(1) 使用你的电子邮箱地址和密码登录或注册我们的网站。

(2) 将鼠标移到网页顶部的SUPPORT选项卡上。

(3) 点击Code Downloads & Errata。

(4) 在Search框中输入书名。

(5) 选择要下载代码文件的图书。

(6) 在下拉菜单中选择购买渠道。

(7) 点击Code Download。

还可以在Packt Publishing网站的图书详情页面点击Code Files按钮进行下载。可以在Search框中输入书名找到图书详情页面。注意，需要用Packt账号登录。

下载代码文件之后，利用最新版的解压缩软件进行解压或提取：

• Windows用户使用WinRAR/7-Zip
• Mac用户使用Zipeg/iZip/UnRarX
• Linux用户使用7-Zip/PeaZip

本书的代码也可以在GitHub（）上找到。我们出版的其他图书的相关代码和视频可以在获取。

下载本书的彩色图片

本书中使用的彩色截图和图表以PDF文件的形式提供下载。彩色图片有助于读者更好地理解控制台输出的变化。可以在这里下载该文件：。

勘误

虽然我们已经想尽办法确保内容的准确性，但错误在所难免。如果你发现我们出版的图书有错误（不论是文本还是代码的错误），请告诉我们，我们将不胜感激。这样你不仅可以让别人知晓错误，减少疑惑，还有助于我们对本书后续版本的改进。如果你发现了任何错误，请访问https://www.packtpub.com/submit-errata告知我们。1通过点击Errata Submission Form链接选择图书，然后输入勘误详情。一旦你的勘误得到验证，我们将接受此勘误并上传到我们的网站上或添加到已有勘误表的相应位置。

1针对本书中文版的勘误，请到https://www.b453m.com/book/2575查看和提交。——编者注

要查看之前提交的勘误，可以打开，然后在搜索框里输入书名，相关信息将会出现在Errata部分。

反盗版

在互联网上，针对受版权保护材料的盗版行为是所有媒体都面临的持续性问题。Packt非常重视版权和许可的保护。如果你在互联网上发现关于我们图书任何形式的非法复制品，请及时向我们提供位置地址和网站名称，以便我们处理盗版行为。

请通过电子邮箱[email protected]联系我们，并将可疑的盗版材料链接附在邮件中。

感谢你保护我们的作者以及我们提供有价值内容的能力。

问题

如果你对本书有任何疑问，请通过quest[email protected]联系我们，我们将尽力解决。

电子书

扫描如下二维码，即可购买本书电子版。

感谢“前端外刊评论”为本书中文版推荐译者、提供帮助。