作者：张帆
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Vue.js项目开发实战试读：
前言
随着手机和移动互联网市场的日益成熟，移动App领域也从如何开发，发展到如何更高效、更低成本地开发阶段。传统的原生平台（PC、iOS和Android）开发技术虽然比较成熟，但由于其开发效率和成本的限制，已经无法满足移动互联网App的开发需求。
跨平台技术横空出世，大量的JavaScript框架和工具得以迅速流行，而Vue.js跃升为其中的佼佼者，成为构建用户界面的绝佳实践技术之一。
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue.js的核心库只关注视图层，并且采用自底向上增量开发的设计，非常容易学习。
Vue.js完全有能力驱动采用单文件组件和Vue.js生态系统支持的库来开发复杂的单页应用，它本身也非常容易与其他库或已有项目进行整合。
目前，市面上有关Vue.js的书甚是驳杂，大多数是对专业文档的复述和非常难懂的底层知识的介绍。很难想象一个编程的初学者，或者只是一个初期尝试Web开发的学生该如何阅读这样的书。
而本书是一本专注于Vue.js项目实战的书，内容涵盖应用广泛的前端和后端技术，可以指导读者构建自身的知识框架。Vue.js主要擅长前端视图层的开发，本书不但介绍了Vue.js的一些开发技巧，而且用大量篇幅介绍了如何构建一个合格的工程项目，以及如何用Vue.js在一个项目中开发出所需要的效果。
本书以实战为主旨，从一个由Node.js开发的完整后台开始，去制作一个电影网站，完成这项工程的每一个步骤，从而提高读者的整体技术水平。本书涵盖了Vue.js中常用的组件、API、布局、第三方UI组件库、请求和数据更新等内容，可以让读者全面、深入、透彻地理解Vue.js主流开发技术和整个项目工程的设计方法，从而提升实际开发水平和项目实战能力。
本书涉及的知识点较多，如图1的词云图所示。即便是一个对Vue.js一无所知的“小白”，通过阅读本书，也可以一点一滴地积累知识，完成整个Vue.js的学习。图1 词云图
本书的学习流程如图2所示。图2 本书学习流程本书特色
1.涵盖Web开发的常用技术
本书不仅是一本介绍Vue.js框架技术的图书，更是一本JavaScript全栈技术图书。书中不仅涵盖从HTML 5、CSS 3到JavaScript脚本编程等Web开发的基础知识，而且也涵盖NoSQL数据库技术、Node.js服务器端开发技术及页面优化技术等高级开发知识。
2.注重实战，通过一个完整的项目带领读者学习
本书通过一个完整的Web工程项目案例贯穿全书，带领读者全流程参与该项目的整个开发过程，让读者可以掌握Web开发的完整技术链，从而提升实际项目开发水平。
3.对项目案例的核心源代码做了详细注释和讲解
为了便于读者理解本书内容，提高学习效率，本书在讲解时给出了书中项目案例的核心源代码，并对源代码做了详细注释，对实现方法和思路做了详细讲解。
4.展现项目设计思路和项目管理流程
笔者认为，一个优秀的程序员不仅要有良好的代码编写能力，更要有对整个项目的设计思路和把控能力，这对于编写业务逻辑的程序员尤其重要。本书从第2章开始就逐步渗透了项目管理的相关知识，展现了从项目设计到项目开发的整个流程。本书内容
第1篇 背景知识（第1章）
本篇主要介绍了网页开发的相关背景知识和Vue.js的背景知识，并通过Hello World标准入门示例带领读者体验如何简单地使用Vue.js。通过对本篇内容的学习，读者可以掌握Vue.js的安装方法，并对Vue.js的主要特性有个大概的了解，从而给后续学习打好基础。
第2篇 项目设计（第2～4章）
本篇主要介绍了一个电影网站的项目设计，包括整个项目的UI设计、路由设计和数据库设计等。通过对本篇内容的学习，读者可以了解一个完整的项目应该如何去构思和设计，应该包含哪些内容，从而提高自己的项目设计能力。
第3篇 Vue.js应用开发（第5~8章）
本篇主要介绍了电影网站前端和后端的实现，涵盖Node.js技术、Vue.js组件和API等技术。本篇通过大量的代码展示了Vue.js的强大功能，并比较了当前流行的前端技术和传统的Web开发技术的差异。通过对本篇内容的学习，读者可以系统地掌握Vue.js应用开发所需要掌握的各种技术。
第4篇 页面优化（第9章）
本篇主要介绍了如何使用网络中已有的UI库或其他造好的“车轮”，去优化自己的页面。通过应用这些流行的UI组件库，开发人员可以快速地将一个页面制作得非常精美。通过对本章内容的学习，读者可以掌握页面优化的各种“武器”，从而开发出更加美观的页面。本书配套资源获取方式
本书涉及的源代码文件等配套资源需要读者自行下载。请在华章公司的网站www.hzbook.com上搜索到本书，然后在本书页面上找到资料下载模块即可下载。本书读者对象
·Vue.js初学人员；
·Vue.js进阶人员；
·JavaScript全栈开发者；
·Web前端开发工程师；
·Web服务器端开发工程师；
·Node.js服务端开发工程师；
·软件开发项目经理；
·各大院校的学生；
·相关培训机构的学员。致谢
感谢本书编辑，让我有机会和本书结缘！感谢在本书写作过程中对我提供过帮助的人！更要感谢家人，正是有了他们的支持，才让我能够坚持下去，完成本书的写作！最后还要感谢读者，本书的价值因你们而存在！
由于笔者水平所限，加之编写时间仓促，书中可能还存在一些疏漏，恳请广大读者指正。本书服务邮箱为hzbook2017@163.com。编者第1篇 背景知识
·第1章 初探网页开发第1章初探网页开发
做前端开发或网页开发的朋友们肯定已经被Vue.js这个名词彻底“包围”了，因为它太“火爆”了！本章的目的就是探索Vue.js的出现及流行的原因。
最早的软件都是运行在大型计算机上的，软件使用者通过“终端”登录到大型计算机上运行软件。随着PC机的兴起，软件开始主要运行在客户端的PC平台上，而数据库这样的软件运行在服务器端，这种Client（客户端）/Server（服务器端）模式简称C/S架构。
随着互联网的兴起，人们发现C/S架构不适合Web。简单而言，最基本的客户端软件虽然安装和使用方便，但是其安装和手动升级成了很繁琐的事。而对于应用程序的逻辑和数据都存储在服务器端的最大优点是：通过所有终端中带有的浏览器作为承载对象，直接交由用户访问存储在服务器中的内容，所以Web应用程序的修改和升级非常便捷。而C/S架构需要每个客户端逐个升级桌面App，因此Browser（浏览器）/Server（服务器端）模式开始流行，简称B/S架构。
在B/S架构下，客户端只需要有浏览器即可，而无须在意用户的使用终端。浏览器只需要请求服务器获取Web页面，并把Web页面展示给用户即可。
同时，Web构建的页面也具有极强的交互性和美观性，不用过于在意某种既定的UI规范，可以更快、更艺术化地表现内容和交互。并且，服务器端升级后，客户端无须做任何部署或更新就可以使用最新的版本，非常适合企业的版本迭代和功能增加。1.1 网页开发历史
简单来说，Web是运行在互联网上的一个超大规模的分布式系统，通过对数据的一些可视化进行展现的一种工具。
网页开发的设计初衷是一个静态信息资源的发布媒介。通过超文本标记语言（HTML）描述信息资源；通过统一资源标识符（URI）定位信息资源；通过超文本传输协议（HTTP）请求信息资源。
HTML、URI（URL地址是URI的一个特例）和HTTP这3个规范构成了Web的核心体系结构，也是一个网页不可或缺的3种协议体系。用简单一点的话来说，用户通过客户端（浏览器）的URL找到网站（如www.baidu.com），同样此地址可以为IP的形式，通过浏览器发出HTTP请求，运行Web服务的服务器收到请求后返回此客户机URL中请求的HTML页面。
对于网络协议，Web是基于TCP/IP协议的。TCP/IP协议把计算机连接在一起，而Web在这个协议族之上进一步将计算机的信息资源连接在一起，形成现在社会中的万维网。每一个运行着的Web服务都相当于在万维网中提供的相关功能和资源。
我们开发的Web应用就是提供信息或者功能的Web资源，成为Web这个全球超大规模分布式系统中的一部分。
1991年8月6日，Tim Berners Lee在alt.hypertext新闻组贴出了一份关于World Wide Web的简单摘要，标志着Web页面在Internet上的首次登场。最早的Web主要被一批科学家们用来共享和传递信息。全世界的Web服务器也就几十台。第一个Web浏览器是Berners Lee在NeXT机器上实现的，其只能“跑”在NeXT机器上。苹果和乔布斯的粉丝对NeXT的历史肯定耳熟能详。真正使得Web开始流行起来的是Mosaic浏览器，这便是曾经大名鼎鼎的Netscape Navigator的前身。
Berners Lee在1993年建立了万维网联盟（World Wide Web Consortium，W3C），负责Web相关标准的制定。浏览器的普及和W3C的推动，使得Web上可以访问的资源逐渐丰富起来。这个时候Web的主要功能就是浏览器向服务器请求静态HTML信息。1995年，马云在美国看到了互联网，更准确地说他其实看到的是Web。阿里早先做的黄页就是把企业信息通过HTML进行展示的Web应用。1.1.1 传统网页开发
传统网页开发可称之为Web 1.0时代，非常适合创业型小项目，出产速度快。对于网页而言，不分前后端，1~5人可完成所有开发工作。页面上由JSP、PHP等语言直接生成相关的数据和页面，在服务端生成后，直接通过浏览器展现，基本上是服务端给什么，浏览器就展现什么。这种页面简单而且交互能力弱，对数据的处理和呈现方式也比较单一。而网页的显示控制一般是在Web的服务层（Server）而不是交由独立的View层控制和管理。
这种模式的优点是：开发简单明快，只需要在服务器或者主机中启动一个Tomcat或Apache等类似的服务器就能开发相关的网页，甚至是生产环境。因为其逻辑和代码简单，所以对于开发和调试同样简单、便捷，对于业务不复杂的情况可以进行快速迭代和功能新增等，非常适合小型公司和个人创业等应用环境。
但是业务总会越变越复杂，这点是不可避免的，需求总是没有止境的。业务复杂度的变化会让控制页面的服务层（Service）越来越多，这造成了整个系统的复杂化和多元化。同样，开发团队的扩张也导致参与人员很可能从几个人快速扩展到几十人，在这种情况下会遇到一些典型问题，如图1-1所示。图1-1 传统网页越来越复杂
·提供的服务越来越多，调用关系变得复杂，前端搭建本地环境不再是一件简单的事。不同的个人提供的页面和其他人提供的页面可能会有细节上的差异，即使考虑团队协作，往往最后呈现的页面和想象中的也会有一些差距。
·前端的样式更新操作变得复杂且造成系统的不稳定。因为所有的页面都是基于后端自动生成的，所以对于一些前端样式的更新和更改可能需要将整个代码逻辑重构，甚至重新上线一个崭新的系统。这样使得系统能提供的服务变得不稳定且难度增加，而单个页面的生成出错可能会导致所有的页面不可用。
·JSP等代码的可维护性变差。随着一个项目的体量增大，其代码的维护一定会越来越难。单一代码负责前台和后端的数据处理，导致职责不清晰，而且由于开发人员的水平和书写习惯不同，以及各种紧急需求，揉杂大量业务代码和其他历史代码，甚至意义不明的无用代码和注释，积攒到一定阶段时，往往会带来大量的维护成本。
为了降低复杂度，以后端为出发点，就有了Web Server层的架构升级，对业务、显示页面、数据的处理进行了逻辑分层，并且为了减少相关的重复，出现了一些后端框架，如Structs、Spring MVC等，这就是后端出现的MVC时代。注意：MVC全名Model View Controller，是模型（Model）、视图（View）和控制器（Controller）的缩写。它是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
这样的处理使得代码可维护性得到明显好转。MVC是个非常好的协作模式，从架构层面让开发者懂得什么代码应该写在什么地方。为了让View层更简单、便捷，适合后端开发者的书写，还可以选择Smarty、Velocity和Freemaker等模板，限制在模板里使用Java代码，更符合工程化的思维。这样看起来虽然功能是变弱了，但正是这种限制使得前后端分工变得更清晰。这个阶段的典型问题是：（1）前端开发重度依赖开发环境。在这种架构下，前后端协作有两种模式：
·一种是前端写好静态页面（emo），等待页面完成后，让后端去套用该静态页面（模板），这样的写法也是现在传统的网页开发常用的方式。淘宝、京东等几乎所有的Web服务提供商在早期及现在依旧有大量业务线是这种模式。其优点是Web服务的测试版可以本地开发，并且可以在局域网中形成类似于自己的完整“开发环境”和“测试环境”，很高效。当然缺点依旧存在：还需要后端套模板，其实相当于并没有将所有的前后端逻辑分离。后端进行模板的套用后还需要前端确定，来回沟通、调整的成本比较大，而且并不适合仅通过文档就可以完成全部的开发工作。
·另一种协作模式是前端负责浏览器端的所有开发和服务器端的View层模板开发。其优点是UI相关代码都是用前端去写，后端不用太关注。但其缺点依旧是前端开发重度绑定后端环境，致使环境成为影响前端开发效率的重要因素。（2）简单而言，还是由于前后端职责依旧纠缠不清而导致的问题。对于之前的小型应用而言，追求极度的工程化思想是没必要且增加成本的，但是对于现阶段的大型应用或追求用户体验的应用而言，前后端的分离是必要的。说明：AJAX正式提出后，加上CDN开始大量用于静态资源存储，于是出现了JavaScript的火热及之后的SPA（Single Page Application，单页面应用）时代。
伴随着JavaScript技术的发展和浏览器、网速带宽等版本的更新，为了追求更佳的用户体验和开发方式（类似Spring MVC），则开始出现了浏览器端的分层架构。
·首先是对于前后端接口的约定。如果后端的接口不够规范，且后端的业务模型不够稳定，那么前端开发会很痛苦。因此应通过规定的接口规则等方式来编写相关的代码，并严格遵守。经过实践和积累后的接口规则成熟后，还可以用来模拟数据，使得前后端可以在约定接口后实现高效、并行开发。
·其次是对前端开发复杂度的控制。SPA应用大多数以功能交互型为主，大量的JavaScript代码进行前台的显示和用户操作的反馈，以及一部分对于数据的处理和简单的运算等。但是对于大量JavaScript代码的组织及与View层的绑定等，都不是容易的事情。1.1.2 新前端网页开发
为了降低前端开发的复杂度，相继涌现出了大量框架，如EmberJS、KnockoutJS和AngularJS等，这些框架总的原则是先按类型分层，比如Templates、Controllers和Models，然后再在层内做切分，这种方式简称SPA，如图1-2所示。图1-2 SPA方式示意图
SPA的好处很明显，例如：
·前后端职责很清晰。前端工作在浏览器端，后端工作在服务端。清晰的分工可以让开发并行，测试数据的模拟不难，前端可以本地开发；后端则可以专注于业务逻辑的处理，以及输出RESTful等接口。
·前端开发的复杂度可控。前端代码很重，但合理的分层能让前端代码各司其职。如简单的模板特性的选择就有很多讲究，如限制什么，留下哪些，代码应该如何组织等。
·部署相对独立，只要通过前后端接口的形式，无论是调试，或者是开发新功能都非常方便。
但依旧有如下一些不可避免的缺点。
·大量代码不能复用。比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码；如果可以复用，那么后端的数据校验可以相对简单化。
·全异步，对SEO不利，无法获得相关的内容，往往还需要服务端做同步渲染的降级方案。
·性能并非最佳。大量的JavaScript方式会影响用户体验，特别是在移动互联网环境下。
·SPA不能满足所有需求，依旧存在大量多页面应用。URL Design需要后端配合，前端无法完全掌控。1.2 MVVM风格开发框架
MVVM（Model View ViewModel）是由微软的WPF带来的新技术体验，如Silverlight、音频、视频、3D和动画等，使得软件UI层更加细节化、可定制化。
同时，在技术层面，WPF也带来了更多更加易于使用的新特性和新的软件设计模式。
MVVM框架是MVP（Model View Presenter）模式与WPF结合演变而来的一种新型架构框架，它立足于原有MVP框架并且融入了WPF的新特性，以应对客户日益复杂的需求变化。1.2.1 为什么会出现MVVM
MVVM具体的设计功能如图1-3所示。它不只是简单的MVC分层模式，而是将View端的显示和逻辑分离出来，这种数据绑定技术非常简单实用，所以称为Model View ViewModel（MVVM）。
MVVM模式跟经典的MVP（Model View Presenter）模式很相似，需要一个为View量身定制的Model，这个Model就是ViewModel。ViewModel中包含了一个项目文件使用的UI组件的接口和相关属性，可以通过一个相关的视图绑定其属性，并可获得二者之间的相同部分和不同部分。
所以这个时候需要在ViewModel中直接对显示的视图进行代码更新，但不仅仅是对显示视图的更新。数据绑定系统还提供了标准化的方式对视图中显示的内容进行验证。图1-3 MVVM的设计功能
视图（View）通常就是一个页面。在以前设计模式中由于没有清晰的职责划分，UI层经常成为逻辑层的全能代理，而后者实际上属于应用程序的其他层。MVP里的M其实和MVC里的M都是指封装了核心数据和逻辑功能的模型；V表示视图；P表示封装了视图中的所有操作和响应用户的输入、输出和事件等。P与MVC里的C代表的意义差不多，区别是MVC是系统级架构的，而MVP是用在某个特定页面上。也就是说，MVP的灵活性要远远大于MVC，实现起来也极为简单。
相信MVC模式读者已经非常熟悉了，这里就不再赘述，这些模式也是依次进化而形成MVC→MVP→MVVM的。1.2.2 MVVM架构的最佳实践
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有下面几大优点。
·视图层低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
·各种代码写成控件之后可重用。可以把一些视图逻辑放在一个ViewModel里面成为多重可以组合的控件，在具体的页面中进行整合和使用，让更多View重用这段视图逻辑。
·可以交由前端工程师独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，通过相应的接口规范可以简单地进行整合。
·便于测试和部署。界面向来是比较难于测试的，而现在测试可以针对具体的页面控件来写，也可以在不依赖于后端的基础上，直接通过工具或者假数据进行测试。1.2.3 MVC、MVP和MVVM开发模式对比
MVC、MVP和MVVM这些模式是为了解决开发过程中的实际问题而提出来的，它们目前作为主流的几种架构模式而被广泛使用。
1.MVC（Model View Controller）模式
MVC是比较直观的架构模式，即用户操作→View（负责接收用户的输入操作）→Controller（业务逻辑处理）→Model（数据持久化）→View（将结果反馈给View）。
MVC使用非常广泛，比如JavaEE中的SSH框架（Struts+Spring+Hibernate）、ASP.NET中的ASP.NET MVC框架。如图1-4所示为代表经典的MVC模式。图1-4 经典的MVC模式
2.MVP（Model View Presenter）模式
MVP是把MVC中的Controller换成了Presenter（呈现），目的就是为了完全切断View跟Model之间的联系，由Presenter充当桥梁，做到View-Model之间通信的完全隔离。
例如，.NET程序员熟知的ASP.NET中的Web Forms（WF）技术即支持MVP模式，因为事件驱动的开发技术使用的就是MVP模式。控件组成的页面充当View，实体数据库操作充当Model，而View和Model之间的控件数据绑定操作则属于Presenter。控件事件的处理可以通过自定义的iView接口实现，而View和iView都将对Presenter负责。如图1-5所示为经典的MVP模式。图1-5 经典的MVP模式
3.MVVM（Model View ViewModel）模式
如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。MVVM是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，而是通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。
这方面典型的应用有.NET的WPF，以及JavaScript框架Knockout和AngularJS，还有本书介绍的Vue.js等。如图1-6所示为经典的MVVM模式。图1-6 经典的MVVM模式1.3 Vue.js来了
那么多的JavaScript框架，我们为什么选择Vue.js？它又是如何发展起来的呢？为了更准确地描述Vue.js，这里引用一段官方文字：
Vue.js（读音/vju:/，类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue.js采用自底向上增量开发的设计。Vue.js的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另外，当与单文件组件和Vue.js生态系统支持的库结合使用时，Vue.js也完全能够为复杂的单页应用程序提供驱动。
2016年一项针对JavaScript的调查表明，Vue.js有着89%的开发者满意度。在GitHub上，该项目平均每天能收获95颗星，为GitHub有史以来星标数项目最多的第十个。说明：可能有读者会疑惑Vue和Vue.js是否一样。二者其实是一样的，Vue是它的名称，因其是一个JavaScript库，所以有时会带上它的文件扩展名.js。
Vue.js是由尤雨溪开发出的。他的思路是提取Angular中自己喜欢的部分，构建出一款相当轻量的框架。Vue.js最早发布于2014年2月，尤雨溪在Hacker News、Echo JS与Reddit的/R/JavaScript版块上均发布了最早的版本，发布后的一天之内，Vue.js就登上了这3个网站的首页。之后Vue.js成为GitHub上最受欢迎的开源项目之一。
同时，在JavaScript框架/函数库中，Vue.js所获得的星标数仅次于React，高于Backbone.js、Angular 2和jQuery等项目。
2016年9月3日，在南京的JSConf China大会上，Vue.js作者尤雨溪正式宣布加盟阿里巴巴Weex团队，并称他将以技术顾问的身份来做Vue.js和Weex的JavaScript Runtime整合，目标是让开发者能用Vue.js的语法跨三端（桌面、Web和手机）进行开发。1.4 Vue.js的安装
使用过jQuery等JavaScript框架的读者，应该都已经熟悉这类JavaScript框架的安装方式了，基本不出以下3种：
·下载.js文件用标签的方式进行引入，因为Vue.js同样也相当于JavaScript中的一个库，其使用的方式和jQuery一样简单。
Vue.js本身是不支持IE 8及其以下版本，因为其使用了不能被IE 8支持的ECMAScript 5特性。但是不用担心Vue.js的兼容性，如图1-7所示，现在所使用的大部分浏览器都已支持ES 5并且支持ES 6的标准，绿色部分（即图1-7中颜色较深的部分）为完全支持，可以看出，所有的流行浏览器均已完全支持ES 5语法。图1-7 浏览器对于ES 5的支持程度注意：关于浏览器是否支持某种技术，可以通过http://caniuse.com/来查询。
下面开始搭建Vue.js的开发环境。当以标签形式引入Vue.js时，官方提供了两种不同的版本供用户和开发者选择：
·用于开发和测试环境的开发版；
·用于生产环境的最小压缩版，也就是Mini版。
和其他JavaScript插件的形式一致，使用.min.js的版本为最小压缩版，直接使用.js的环境为正式版。注意：开发环境不要用最小压缩版，因为对于此版本的压缩版而言，去除了所有的错误提示和警告部分，可以使用开发版进行调试和开发。（1）Vue.js开发版本地址为https://vuejs.org/js/vue.js，可以通过该地址将其下载至本地，再在页面中通过标签进行引入。（2）打开此地址可以看到Vue.js中的所有代码，复制所有的代码，然后在本地新建JS文件，再将代码粘贴进去。或者直接打开相关下载软件，新建任务下载，如图1-8所示。（3）下载后的开发版本即为开发所需要的JS库。新建一个.html文件，这里命令为index.html，具体的目录结构如图1-9所示。图1-8 新建下载任务图1-9 项目结构（4）在index.html中通过标签来引入Vue.js。Vue.js的核心是允许采用简洁的模板语法声明将数据渲染进DOM，所以这里的示例通过数据来展示。【示例1-1】引入本地Vue.js。
这里声明一个节点id为app，并且使用Vue.js将其绑定一个message变量，在JavaScript代码中将其赋值为Hello Vue.js。完整的代码如下，具体语法解析会随着本书的深入再逐步讲解。
{{ message }}
本例网页打开后的显示效果如图1-10所示。图1-10 显示效果注意：Vue.js的核心功能仅仅是提供一个数据绑定的显示效果，所以可直接双击打开index.html页面，而非在服务器的条件下，其数据绑定功能依旧可以使用。1.4.2 使用CDN安装
CDN（Content Delivery Network，内容分发网络）其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输得更快、更稳定，通过在网络各处放置节点服务器，构成在现有的互联网基础之上的一层智能虚拟网络。
CDN系统能够实时地根据网络流量和各节点的连接、负载状况，以及到用户的距离和响应时间等综合信息，将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可以就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。
一般的网站利用CDN加速静态文件和资源，可能甚至引用的更多，这样将资源文件与业务代码一锅炖的方式适用于小型的、应用服务器压力并不大的系统（如并发、带宽、存储空间、资源等）。
CDN方式的优点是开发省力、发布省力、对服务器要求小、省钱、没有具体公网接入需求。许多小型、内部使用型的网站系统往往采取这种形式放置资源文件。（1）有很多的网络服务或者是网站云主机商提供这类的服务，从收费到免费有各种不同形式，这里推荐一个国内常用的、免费的、前端开源的CDN加速服务，是由BootStrap中文网运作的，其地址为http://www.bootcdn.cn/，主页如图1-11所示。（2）在搜索框中搜索Vue.js后，这里会提供Vue.js及与Vue.js有关的开源JavaScript组件供开发者选择。图1-11 开源的CDN主页（3）单击进入Vue.js的选项，这里提供了最新版本和所有的历史版本，并且提供了很多相关的文件，如图1-12所示。图1-12 最新版本的Vue.js（4）本例暂时只需要Vue.js这个文件。为了方便用户的使用，BootCDN提供了两种复制方式：一种是复制链接地址，另一种是直接复制
{{ message }}
运行该HTML文件，浏览器中的显示效果如图1-13所示，其效果和示例1-1中引入本地的Vue.js效果一致。图1-13 实现效果说明：可能读者会有疑问，仅仅是为了在网页中显示一行简单的Hello Vue.js，却需要如此烦琐的代码？Vue.js不是为了显示一个静态信息而出现的库，它提供了一个数据的双向绑定功能。也就是说，当动态更新message中的值时，并不需要刷新网页或更新节点，此节点的值会随着JavaScript中代码值的变动而改变，这就是Vue.js的强大之处。我们会在1.4.4节中介绍使用Chrome浏览器测试Vue.js的双向绑定，以此验证这个强大的功能。1.4.3 “npm大法”安装
npm是一个非常有用的JavaScript包管理工具，通过npm可以非常迅速地进行Vue.js的安装、使用和升级，而不用担心由此所造成的混乱。在用Vue.js构建大型应用时推荐使用npm安装，它能很好地和Webpack或Browserify等模块打包器配合使用。说明：第2章会详细介绍npm的安装和基本用法，读者如果不熟悉而且还没有安装npm，可以跳过本节，不影响读者继续阅读本节内容。（1）Vue.js也提供了配套工具来开发单文件组件，在Windows中可以通过Win+R组合键运行CMD，Mac OS系统或者Linux系统中需先打开终端，然后在打开的CMD中输入以下命令安装相应的Vue.js。npm install vue
安装效果如图1-14所示。图1-14 CMD安装（2）这样Vue.js就安装在了相关的项目中，也可以使用--global命令参数进行安装，Vue.js会自动全局安装。（3）不仅如此，为了方便开发者开发相关的Vue.js大型应用，官方提供了一个非常方便的CLI命令行工具，该工具可以使用npm进行安装：npm install --global vue-cli
安装完成后的效果如图1-15所示。图1-15 安装CLI注意：这里一定要进行全局安装，安装完成后，可以直接在命令行中使用，如果不能使用，提示无效的命令，请将其路径配置为全局路径。（4）安装完毕后，使用以下命令进行测试：vue –V
显示效果如图1-16所示，证明安装成功。图1-16 安装成功1.4.4 使用Chrome浏览器测试Vue.js的双向绑定
读者可以通过Chrome浏览器提供的调试功能来测试Vue.js提供的这个双向绑定功能。（1）在Chrome浏览器中按F12键（苹果计算机需要在右键快捷菜单中选择“检查”命令），可以打开Chrome浏览器的控制台，选择Console选项卡，如图1-17所示。图1-17 Chrome控制台（2）控制台中提示需要安装vue-devtools调试工具，并且已经给了相关的下载GitHub地址，可以单击此地址进行下载。进入此地址后，可以看到其中提供的开源代码和不同版本的安装文件，拉至页面下方的readme部分，单击Get the Chrome Extension链接，即为Chrome版本的调试工具安装包，如图1-18所示。
试读结束[说明：试读内容隐藏了图片]