Vue.js项目开发实战最新章节_张帆著

2.1　JavaScript运行与开发环境

本节将学习适合JavaScript开发的各种IDE（Integrated Development Environment，集成开发环境），以及调试用的浏览器、基本的安装环境等知识。

2.1.1　神奇的包管理器——npm

npm（Node Package Manager，Node包管理器）是Node.js默认的用JavaScript编写的软件包管理系统，其Logo如图2-1所示。

图2-1　npm标志

npm完全用JavaScript写成，最初由艾萨克·施吕特（Isaac Z.Schlueter）开发。艾萨克表示自己已意识到“模块管理很糟糕”的问题，并看到了PHP的Pear与Perl的CPAN等软件的缺点，于是编写了npm。npm可以管理本地项目所需要的模块并自动维护依赖情况，也可以管理全局安装的JavaScript工具。

如果一个项目中存在package.json文件，那么用户可以直接使用npm install命令自动安装和维护当前项目所需的所有模块。在package.json文件中，开发者可以指定每个依赖项的版本范围，这样既可以保证模块自动更新，又不会因为所需模块功能大幅变化而导致项目出现问题。开发者也可以选择将模块固定在某个版本之上。

接下来讲解npm的安装。

（1）若安装npm则先需要安装Node.js，它是一个JavaScript运行环境（Runtime），发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行了优化，提供替代API，使得V8在非浏览器环境下运行得更好。其官网下载地址为 https://nodejs.org/en/ ，进入官网后如图2-2所示。

图2-2　Node.js官网

（2）系统会自动选择访问者适合的版本，有两种版本可以选择：一种是LTS版本，另一种是Current版本。LTS版本适用于长期稳定的更新，而Current版本可能会出现一些意料之外的问题，但同时会有更多的支持和更新的功能。

选择合适的版本下载后，双击下载的文件开始安装，如果是Windows 7以上的操作系统，需要右击文件，在弹出的快捷菜单中选择“以管理员方式”打开。开始安装界面图如图2-3所示。

图2-3　安装Node.js界面

（3）勾选I accept the terms in the License Agreement复选框，单击Next按钮进入下一步，选择安装的地点和组件，再次单击Next按钮，开始安装。

（4）安装完毕之后，可以在Windows的命令提示符（cmd）中测试安装是否成功。查看是否成功地安装了Node.js和npm的方式如下。

使用键盘的Win+R组合键打开运行框，输入cmd命令，弹出Windows命令提示符（cmd）对话框，在其界面上输入如下命令后按Enter键。

node –v

如果成功安装，界面如图2-4所示。

图2-4　Node.js成功安装

（5）然后测试npm是否安装成功，输入如下命令后按Enter键。

npm –v

如果成功安装，界面如图2-5所示。

图2-5　npm成功安装

注意：如果命令提示符（cmd）中提示找不到该命令，若确定安装没有问题的话，可能是由于权限不足或者是没有将其放置在全局变量中导致的，读者可以尝试手动配置全局变量。

那么怎样使用npm呢？请读者不要着急，本书介绍的Vue.js或者读者后面将要学习的其他技术，都将会使用npm进行安装和管理。

注意：如果读者在使用npm进行包管理的时候，因为网络问题而导致出现的一些安装失败的情况时，可以切换为国内的源进行安装。

本书推荐淘宝提供的npm源，其官方地址为 http://npm.taobao.org/ 。该网站中包含了完整的npmjs.org镜像，开发者可以用其代替官方版本（只读），同步频率目前为10分钟一次，以保证尽量与官方服务同步。

为了方便开发者的使用，淘宝提供了定制的cnpm命令行工具代替默认的npm进行操作，其参数和使用方法与npm相同。

其安装方式等同于一个普通npm包的安装方法，使用命令代码进行安装。

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意：本书中截图一般使用cnpm工具，但是为了使本书内容具有通用性，所以代码部分和说明部分均使用npm，后面不再赘述。

当然，也可以不使用npm进行安装，对于一些因为网络问题无法安装的包，可以通过添加alias参数直接指定。

# 阿里cnpm的配置
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

# zshrc中指定别名
$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.
npm.taobao.org \
  --cache=$HOME/.npm/.cache/cnpm \
  --disturl=https://npm.taobao.org/dist \
  --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc

2.1.2　好用的浏览器——Chrome

Google Chrome是由Google开发的免费网页浏览器。Chrome是化学元素“铬”的英文名称，过去也用Chrome称呼浏览器的外框。Chrome相应的开放源代码计划名为Chromium，因此Google Chrome本身是非自由软件，未开放源代码。

Chrome浏览器的展示效果图如图2-6所示。

Chrome代码是基于其他开放源代码软件所编写的，包括Apple WebKit和Mozilla Firefox，并开发出称为V8的高性能JavaScript引擎。Google Chrome的整体发展目标是提升稳定性、速度和安全性，并创造出简单且有效率的用户界面。

据StatCounter统计，截至2016年6月，Google Chrome在全球桌面浏览器的网页浏览器中的使用分布为62%。

为什么推荐大家选择Chrome而不是IE或Firefox等浏览器呢？主要原因是Chrome使用的内核技术。

这里首先需要介绍一下WebKit技术。

图2-6　Chrome浏览器

WebKit是一种用来让网页浏览器绘制网页的排版引擎，它被用于Apple Safari，其分支被用于基于Chromium的网页浏览器，如Opera与Google Chrome。

众所周知，Chrome本身是闭源的，也就是说其内部的代码是绝对的商业代码，但是其本身是建立在Google另一个开源的浏览器Chromium之上的，所以它是一个稳定或者说是商业的版本。

闭源：“除非法律明确允许或要求，或经谷歌明确书面授权，否则，您不得（而且不得允许其他任何人员）复制、修改软件或软件的任何部分；对软件或软件的任何部分创作衍生作品；进行反向工程、反编译；或者试图从软件或软件的任何部分提取源代码。”。

当然开发者也可以选择不贴牌的Chromium，其采用的是BSD开源协议（Chromium首页、文档和下载）。

而对于Chromium内核本身，现在在所有的浏览器中被广泛使用，其实，对于国内的一些免费浏览器软件，除了傲游浏览器是直接基于WebKit开发的，其他的浏览器都是基于Chromium开发的。部分Chromium内核浏览器如图2-7所示。

而WebKit也是Apple iOS、Android、BlackBerry Tablet OS、Tizen及Amazon Kindle的默认浏览器。WebKit的C++应用程序接口提供了一系列的Class以在视窗上显示网页内容，并且实现了一些浏览器的特色，如用户链接点击、管理前后页面列表及近期历史页面等。

Chrome作为WebKit的佼佼者，为了方便开发和使用，优化了更多的细节和开发工具，所以非常适合Web应用的开发。当然如果读者喜欢国产浏览器的话，请在急速模式下运行，一般而言也是可以的。

通过在浏览器界面上按F12键，则会打开Chrome特有的调试页面，该页面在将来的开发和调试中极为重要，如图2-8所示。

图2-7　部分浏览器

图2-8　调试界面

2.1.3　Vue.js的调试神器——vue-devtools

所有的代码都无法一蹴而就，都是在不断调错过程中逐步完善的。因为Vue.js本身是打包到生产环境的JavaScript代码，对于调试工作而言并不是非常友善和方便，所以它提供了vue-devtools插件，就是为了解决调试的问题。

前面在介绍Vue.js双向绑定测试的时候已经安装过该插件，读者可以通过谷歌商店添加，也可以访问以下的GitHub地址来获得最新的开发者工具：

https://github.com/vuejs/vue-devtools#vue-devtools 。

注意： GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名为GitHub。GitHub于2008年4月10日正式上线，除了Git代码仓库托管及基本的Web管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。目前，其注册用户已经超过350万，托管版本数量也非常多，其中不乏知名开源项目Ruby on Rails、jQuery、Python等。

本节将介绍下载源代码自行编译打包安装的方法，主要经过几个主要步骤：下载源代码，安装源代码所需要的依赖，生成插件，添加插件到Chrome，下面是详细步骤。

（1）在上述GitHub页面的Readme中，单击下载链接，如图2-9所示。

图2-9　下载链接

（2）下载的是GitHub中提供的Vue.js的源代码压缩包，需要用户使用系统中安装的解压缩软件进行解压，解压后的文件结构如图2-10所示。

图2-10　Vue.js安装文件

（3）上述目录结构与Vue.js的工程文件结构有些相似之处，其根目录包含package.json文件。也就是说，源码本身也是一个JavaScript工程。接下来，就需要使用npm命令安装依赖了。

（4）使用CMD或者Shell工具进入该解压目录下，使用npm命令安装依赖（安装过程稍长，可能需要几分钟）：

npm install

注意：由于网络因素，如果使用淘宝提供的npm源请使用cnpm命令进行安装，与npm命令安装方式无任何区别，本书默认以npm命令安装为例。

（5）安装所有的依赖项成功后，使用以下命令即可成功运行该工程，其效果如图2-11所示。

npm run build

图2-11　打包build

注意：此时已经将该源代码打包成为了可以被Chrome使用的插件格式，其生成的文件位于当前目录的shells/chrome下。

（6）打开Chrome浏览器，输入地址chrome://extensions/或者选择“更多工具”|“扩展程序”命令进入插件管理页面，此时需要勾选“开发者模式”，如图2-12所示。

图2-12　开启开发者模式

（7）选中开发者模式中的“加载已解压的扩展程序”选项，选择项目中的shells/chrome文件夹，单击“确定”按钮，即成功地安装了Vue.js插件，其安装效果如图2-13所示。

图2-13　安装成功

2.1.4　非常智能的IDE——WebStorm

众所周知，开发环境中重要的一环就是面向开发者的代码编辑器，一个好用的代码编辑器可以极大的提高开发者编写代码时的流程感，提高用户的工作效率甚至是工作时的心情。

一般而言，编辑器可分为以下两类：

（1）一类是提供基本的文字输入和显示，或者只是简单的代码高亮等基本功能的笔记本式的代码编辑器，这类编辑器的代表就是Vim、Notepad等系列。其优点如下：

·编辑器的软件较小，启动迅速，占用内存小；

·并非针对某一种语言或特定使用环境；

·像Vim、Vi等软件可以直接通过终端等修改远程服务器中的代码。

但正是因为这一类的编辑器过于简洁和追求速度、体量，所以很多工程化编写代码的功能并没有提供，这也造成了用这样的代码编辑器编写一些大型软件或者系统时，可能会存在难以使用的情况。

（2）另外一类就是集成开发环境，也就是IDE。

集成开发环境（Integrated Development Environment，IDE）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具，是集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境，如微软的Visual Studio系列，Borland的C++Builder、Delphi系列等。IDE可以独立运行，也可以和其他程序并用，多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE（如HomeSite、Dreamweaver等），因为很多项任务会自动生成。

作为一个开发者，选择一个合适而且好用的IDE是非常重要的一环，虽然在庞大的开发者团队中，每个人的爱好和使用习惯有所不同，但总会有一些常用的IDE是受到大众认同的。

注意：这里并非说IDE是完美无缺的，其实对于IDE而言，大量的内存及处理器占用，很可能对于一个老旧的主机而言根本无法使用。

对于Vue.js开发，也存在一个众所周知的集成开发环境，那就是出自JetBrains的WebStorm，其下载地址为 http://www.jetbrains.com/WebStorm/ ，主页如图2-14所示。