第3章　Webpack+Vue.js开发准备

所有的Vue.js项目都是在Webpack的框架下进行开发的。可以说vue-cli直接把Webpack做了集成。在开发时，一边享受着飞一般的开发速度，一边体验着Webpack带来的便利。

本章将介绍如何使用Webpack+Vue.js进行开发的基本知识。

3.1　学习过程

在学习任何一种框架的时候，都是按照循序渐进的顺序来的。

（1）安装。

（2）新建一个页面。

（3）做一些简单变量的渲染。

（4）实现页面的跳转（路由）。

（5）实现页面间的参数传递（路由）。

（6）实现真实的http请求（访问接口）。

（7）提交表单。

（8）使用一些技巧让代码层次化（组件）。

按照笔者之前在惠普、联通、移动等公司的讲课经验，只需要一天的时间就可以把本章内容学会，并且上手开发Vue.js项目。

3.1.1　可以跳过的章节

对于有一定Node基础的读者，可以跳过“NVM的安装”。对于使用Linux/Mac的读者，可以跳过“Git Bash的安装”。

3.1.2　简写说明

由于本章是Webpack + Vue.js下的实战开发，所以统一使用Vue.js来代替冗长的Webpack + Vue.js。

例如，在Vue.js中创建页面需要以下两步。

（1）新建路由。

（2）新建vue页面。

3.1.3　本书例子文件下载

本章中的所有例子，由于都需要与Webpack相结合，因此笔者将其单独做成一个项目：https://github.com/sg552/vue_js_lesson_demo，读者可以下载后直接运行。

$ git clone https://github.com/sg552/vue_js_lesson_demo.git
$ npm install -v
$ npm run dev

可以在http://localhost:8080/#/中看到效果，如图3-1所示。

图3-1　页面效果

3.2　NVM、NPM与Node

NVM（Node Version Manager）是非常好用的Node版本管理器。这个技术出现的原因，是由于不同的项目node版本也不同，有的是5.0.1，有的是6.3.2。如果node版本不对，运行某个应用时，很可能就会遇到各种莫名其妙的问题。

因此，我们需要在同一台机器上同时安装多个版本的Node。NVM应用而生，很好地帮我们解决了这个问题。

Linux/Mac下的NVM官方网址：https://github.com/creationix/nvm。

Windows下的NVM官方网址：https://github.com/coreybutler/nvm-windows。

NPM（Node Package Manager）只要安装了node，就会捆绑安装该命令。它的作用与Ruby中的bundler及Java中的maven相同，都是对第三方依赖进行管理的。

3.2.1　Windows下的安装

步骤01使用浏览器打开https://github.com/coreybutler/nvm-windows/releases，如图3-2所示。

图3-2　打开下载网址

步骤02单击最新的release版本进行下载“1.1.6中的nvm-setup.zip”文件。

步骤03解压下载文件，双击其中的nvm-setup.exe文件，就可以开始安装了，如图3-3所示。

图3-3　开始安装

步骤04单击Next按钮，在打开的对话框中选中I accept the agreement单选按钮，如图3-4所示。

图3-4　选择接受

步骤05继续单击Next按钮，在打开的对话框中选择安装路径。这里选择安装到D:\nvm，如图3-5所示。

图3-5　选择安装路径

步骤06继续单击Next按钮，在打开的对话框中询问把nvm的快捷方式放在哪里（symlink的作用同快捷方式，允许我们在任意路径下都可以调用nvm命令），不用修改，直接单击Next按钮，如图3-6所示。

图3-6　默认快捷方式位置

步骤07然后弹出确认安装对话框，继续单击Next按钮就可以了。

步骤08最后设置环境变量。

NVM_HOME      D:\nvm
NVM_SYMLINK  C:\Program Files\nodejs

从控制面板中进入到“所有控制面板项目”→“高级系统配置”→“环境变量”，如图3-7所示。

图3-7　系统变量

对PATH的修改则是在原有值的基础上添加%NVM_HOME%、%NVM_SYMLINK%，如图3-8所示。

图3-8　编辑环境变量

3.2.2　Linux、Mac下的安装

（1）下载nvm的源代码，运行下面命令即可。

$ git clone https://github.com/creationix/nvm.git ～/.nvm && cd ～/.nvm && git
checkout `git describe --abbrev=0 --tags`

（2）Linux、Mac的用户：为脚本设置启动时加载（对于使用Windows的读者，可以直接跳过第二步，到官方网站下载exe安装文件就可以了）。

把下面的代码放到～/.bashrc或～/.bash_profile或～/.zshrc中。

$ source ～/.nvm/nvm.sh

3.2.3　运行

不能使用$ which nvm验证安装是否成功，因为即使成功了，也不会返回结果。直接在命令行输入以下代码即可。

$ nvm

如果安装成功，就会看到以下英文。

Running version 1.1.6.
Usage:
  nvm arch                     : Show if node is running in 32 or 64 bit mode.
       nvm install <version> [arch] : The version can be a node.js version or
"latest" for the latest stable version....
  nvm list [available]         : List the node.js installations. Type
"available" at the end to see what can be ...
 nvm on                       : Enable node.js version management.

3.2.4　使用NVM安装或管理node版本

（1）列出所有可以安装的node版本。

Windows下的命令：

$ nvm list available

Linux/Mac下的命令：

$ nvm list-remote

可以看到安装的所有版本。下面是Windows中的例子，Linux、Mac类似。

（2）列出本地安装好的版本。

$ nvm list

结果形如：

$ nvm list
* 10.5.0 (Currently using 64-bit executable)
  6.9.1

在上面的结果中，表示当前系统安装了两个node版本：6.9.1和10.5.0。默认的node版本是10.5.0。

（3）安装node。

选择一个版本号就可以安装了。

$ nvm install 10.5.0

安装好之后，退出命令行并重新进入即可。

（4）使用node。

下面的命令是为当前文件夹指定node的版本。

$ nvm use 10.5.0

对于Linux、Mac，如果希望为系统全局使用某个版本，就可以运行下面的命令。

$ nvm alias default 10.5.0

在Linux、Mac下，还可以将其放到～/.bashrc、～/.bash_profile中。这样系统每次启动，都会自动指定node作为全局的版本。

3.2.5　删除NVM

对于Linux、Mac，直接手动删掉对应的配置文件（如果有的话）即可。

～/.nvm
～/.npm
～/.bower

对于Windows，可直接在控制面板中卸载该软件。

3.2.6　加快NVM和NPM的下载速度

由于某些原因，在国内连接国外的服务器会比较慢，所以我们使用下面的命令，就可以解决这个问题（默认是使用国外的服务器，现在改成使用国内的镜像服务器）。感谢淘宝提供了这个方法。

对于NVM，使用NVM_NODEJS_ORG_MIRROR这个变量作为前缀。

$ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/dist nvm install

对于NPM，使用cnpm代替npm命令。

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

对于Linux、Mac用户，可以直接创建一个"alias"命令。

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

然后通过国内的淘宝服务器安装node包。例如：

$ cnpm install vue-cli -g

3.3　Git在Windows下的使用

在《程序员修炼之道：从小工到专家》中提到了一个让程序员非常尴尬的局面：老板要看进度，结果程序员拿不出来，只好跟老板撒谎：我的代码被猫吃了。

虽然我们的代码不会被猫吃掉，但是几乎每个程序员都会犯的错误就是：在下班的时候忘记保存，或者突然断电，结果导致写了几个小时的代码就这样没有了。因此，每个程序员必须要对自己的代码做版本控制。

在2009年之前，国内的人大部分都用SVN。从2010年开始，越来越多的人开始使用Git。本节专门为Windows程序员准备。因为对于Linux和Mac用户来说，Git都是现成的一行命令就能搞定。

3.3.1　为什么要使用Git Bash

Git Bash不但提供了Git，还提供了bash，一种非常不错的类似于Linux的命令行。在Windows环境下，命令行模式与Linux/Mac是相反的。例如：

Linux/Mac下：（使用左斜线作为路径分隔符）

$ cd /workspace/happy_book_Vue.js

Windows下：（使用右斜线作为路径分隔符，并且要分成C、D等盘）

C:\Users\dashi>d:                   (进入D盘)
D:\>cd workspace\happy_book_Vue.js   (进入到对应目录)

只要不是做.NET/微信小程序/安卓开发，都应该转移到Linux平台上。原因是：代码被编译后，会运行在Linux+Nginx的服务器中。最好的办法就是从现在开始就适应Linux的环境。另外，命令行在绝大多数情况下比“图形化”的操作界面好用。

3.3.2　安装git客户端

在Windows下选择Git Bash。官方网址为https://gitforwindows.org/。

步骤01打开下载页面后就可以看到Logo，如图3-9所示。

图3-9　下载页面

步骤02选择最新版本，这里下载2.16.2。

步骤03下载并运行，可以看到欢迎对话框，如图3-10所示。

图3-10　欢迎对话框

步骤04单击Next按钮，在打开的对话框中看到选择安装的内容，保持默认就好，如图3-11所示。

图3-11　选择安装内容

步骤05单击Next按钮，在打开的对话框中选择哪个编辑器作为git消息编辑器。

nano：最简单的Linux下的编辑器，同Windows下的记事本。学习曲线是0。
vim：需要长时间学习的编辑器，被称为“编辑器之神”。
notepad++：加强型记事本，也很好用，学习曲线是0。
visual studio code：一款IDE。

对于新手来说，建议选择notepad ++，如图3-12所示。

图3-12　选择编辑器

步骤06单击Next按钮，询问使用什么风格的命令行。这里建议选择默认的Use Git from Windows Command Prompt，如图3-13所示。

图3-13　选择默认命令行

步骤07单击Next按钮，询问使用什么风格的SSH连接程序，如图3-14所示。

OpenSSH SSH的首选，是Git bash自带的。
Plink第三方用户自己安装的SSH连接程序。

图3-14　选择SSH连接程序

步骤08单击Next按钮，询问使用什么SSH后端，这里选择默认的OpenSSL，如图3-15所示。

图3-15　选择SSH后端

步骤09单击Next按钮，询问使用什么Checkout/commit风格。因为Windows与linux对待文件的处理是不同的，如回车在Windows下是\r\n，而在linux下就是\n，所以这里选择默认的第一项即可（用Windows风格checkout，用unix风格commit），如图3-16所示。

图3-16　选择Checkout/commit

步骤10单击Next按钮，询问用什么风格的console（命令行）。这里一定要选择Use MinTTY（the default terminal of MSYS2），也就是类似于Linux风格的命令行。可以说，它就是非常著名的Cygwin，如图3-17所示。

图3-17　选择console（命令行）

步骤11单击Next按钮，询问其他配置项目。直接选择默认即可，如图3-18所示。

图3-18　设置其他配置项目

步骤12继续单击Next按钮，就安装成功了，如图3-19所示。

图3-19　安装成功

3.3.3　使用Git Bash

（1）打开Git Bash。

打开Git Bash，可以看到这个页面，如图3-20所示。

图3-20　打开Git Bash

一片空荡荡。估计习惯了鼠标和我的电脑的读者会非常不习惯。不要紧，我们慢慢来。

（2）查看当前路径：pwd。

输入$ pwd就可以知道当前位置了。

[email protected] MINGW64 ～
$ pwd
/c/Users/dashi

在上面的结果中可以看到：

dashi是window系统的用户名（笔者的外号叫大师）。
i5-16g是电脑在局域网的名字。
MINGW64是操作系统的名字。可以认为它是Linux、Windows、Mac之外的第4种操作系统。
$是命令行的前缀。后面的pwd就是输入的命令。
/c/Users/dashi就是当前位置。这个是Linux风格。实际上，它对应的Windows的标准路径是C:\Users\dashi

每次打开Git Bash的时候，都是默认的“当前用户在Windows”中的用户文件夹。如果我们在一个窗口中打开这个路径，就可以看到我的用户文件夹了，如图3-21所示。

图3-21　用户文件夹

可以看到输入的路径是C:\Users\dashi，结果在GUI中显示的文字是">此电脑>本地磁盘(C:) >用户> dashi"。

（3）切换路径：cd。

例如，想进入工作目录（位于D:\workspace\happy_book_Vue.js），继续写关于Vue.js书，就可以这样：

[email protected] MINGW64 ～
$ cd /d/workspace/happy_book_Vue.js/
[email protected] MINGW64 /d/workspace/happy_book_Vue.js (master)
$

大家可以看到，D:\在Git Bash中对应的地址是/d，这个就是唯一需要注意的点了。

其他git基本知识（git clone、git commit、git push等）就不在本书中赘述了。

3.4　Webpack

随着SPA（Single Page App）单页应用的发展，可以发现，使用的js/css/png等文件特别多，比较难管理，文件夹结构也很容易混乱。很多时候我们希望项目可以具备压缩css，压缩js，正确地处理各种js/css的import，以及相关的模板html文件。

在最开始的一段时间里，可以说每个SPA项目发展到一定规模，都会遇到这样的瓶颈和痛点。为了解决这个问题，就出现了Webpack，其官方网站为https://webpack.js.org/，github为https://github.com/webpack/ webpack。

Webpack官方网站页面如图3-22所示。

图3-22　Webpack官方页面

Webpack是一个打包工具，可以把js、css、node module、coffeescrip、scss/less、图片等都打包在一起，简直是模块化开发SPA福音。因此，现在几乎所有的SPA项目、JS项目都会用到Webpack。

在前面的入门知识中，我们看到Vue.js只需要引入一个外部的js文件就可以工作了。不过，在实际开发中，情况就复杂了很多倍，我们都是统一使用Webpack + Vue.js的方式来做项目的，这样才可以做到“视图”“路由”“component”等的分离，以及快速打包、部署及项目上线。

3.4.1　Webpack功能

Webpack功能非常强大，对各种技术都提供了支持，仿佛是一个“万能胶水”，把所有的技术都结合到了一起。

1. 对文件的支持

支持普通文件
支持代码文件
支持文件转url（支持图片）

2. 对JSON的支持

支持普通JSON
支持JSON5
支持CSON

3. 对JS预处理器的支持

支持普通JavaScript
支持Babel（使用ES2015+）
支持Traceur（使用ES2015+）
支持Typescript
支持Coffeescript

4. 对模板的支持

支持普通HTML
支持Pug模板
支持JADE模板
支持Markdown模板
支持PostHTML
支持Handlebars

5. 对Style的支持

支持普通style
支持import
支持LESS
支持SASS/SCSS
支持Stylus
支持PostCSS

6. 对各种框架的支持

支持Vue.js
支持Angular2
支持Riot

3.4.2　Webpack安装与使用

Webpack安装命令如下：

$ npm install --save-dev webpack

因为Webpack自身是支持Vue.js的，所以Webpack与Vue.js已经结合到很难分清谁是谁，我们就索性不区分。知道做什么事情需要运行什么命令就可以了。

在接下来内容中，读者会看到Webpack+Vue.js共同开发的方法和步骤。

3.5　开发环境的搭建

NPM:3.10.8 (NPM > 3.0)
Node:v6.9.1 (Node > 6.0)
Vue.js:2.0+

总体来说，只要能安装上Node和Vue.js就可以。

3.5.1　安装Vue.js

需要同时安装vue和vue-cli这两个node package。

运行下面的命令：

$ npm install vue vue-cli -g

-g表示这个包安装后可以被全局使用。

3.5.2　运行vue

创建一个基于Webpack模板的新项目。

$ vue init webpack my-project

注意，我们使用Vue都是在Webpack前提下使用的。

安装依赖：

 $ cd my-project
$ cnpm install

在本地以默认端口来运行。

$ npm run dev

然后就可以看到在本地已经运行起来了。

> [email protected] dev /workspace/test_vue_0613
> node build/dev-server.js


> Starting dev server...


DONE  Compiled successfully in 12611ms   12:16:47 PM
> Listening at http://localhost:8080

打开http://localhost:8080就可以看到刚才创建的项目欢迎页，如图3-23所示。

图3-23　项目欢迎页

3.6　Webpack下的Vue.js项目文件结构

前面我们已经安装了Webpack、vue-cli并运行成功，看到了Vue.js的第一个页面。那么我们首先需要对Webpack下的Vue.js有一个全面的了解。

运行下面命令后：

$ vue init webpack my-project

会生成一个崭新的项目。它的文件结构如下：

▸build/         // 编译用到的脚本
 config/        // 各种配置
 dist/          // 打包后的文件夹
 node_modules/  // node第三方包
 src/           // 源代码
 static/        // 静态文件, 暂时无用
 index.html     // 最外层文件
 package.json   // node项目配置文件

下面我们针对重要的文件和文件夹依次说明。

3.6.1　build文件夹

build文件夹中保留了各种打包脚本，是不可或缺的，不可随意修改。

build文件夹展开后如下：

▾ build/
   build.js
   check-versions.js
   dev-client.js
   dev-server.js
   utils.js
   vue-loader.conf.js
   webpack.base.conf.js
   webpack.dev.conf.js
   webpack.prod.conf.js

build.js：打包使用，不能修改。
check-versions.js：检查npm的版本，不能修改。
dev-client.js和dev-server.js：是在开发时使用的服务器脚本，不能修改（借助于node后端语言，在做Vue.js开发时，可以通过$npm run dev命令打开一个小的server运行Vue.js）。
utils.js：不能修改，做一些css/sass等文件的生成。
vue-loader.conf.js：非常重要的配置文件，不能修改。内容是用于辅助加载Vue.js用到的css source map等。
Webpack.base.conf.js、Webpack.dev.conf.js、Webpack.prod.conf.js：这三个都是基本的配置文件，不能修改。

3.6.2　config文件夹

与部署和配置相关。

▾ config/
    dev.env.js
    index.js
    prod.env.js

dev.env.js：开发模式下的配置文件，一般不用修改。
prod.env.js：生产模式下的配置文件，一般不用修改。
index.js：很重要的文件，定义了开发时的端口（默认8080）、图片文件夹（默认static）、开发模式下的代理服务器。

对于这个文件夹的内容，会在后续的章节中陆续进行解释（如对于某个页面的渲染过程、如何做代理转发）。

3.6.3　dist文件夹

打包之后的文件所在目录如下：

▾ dist/
    static/
      css/
        app.d41d8cd98f00b204e9800998ecf8427e.css
        app.d41d8cd98f00b204e9800998ecf8427e.css.map
      js/
        app.c482246388114c3b9cf0.js
        app.c482246388114c3b9cf0.js.map
        manifest.577e472792d533aaaf04.js
        manifest.577e472792d533aaaf04.js.map
        vendor.5f34d51c868c93d3fb31.js
        vendor.5f34d51c868c93d3fb31.js.map
    index.html

可以看到，对应的css、js、map都在这里。

注意，文件名中无意义的字符串是随机生成的。目的是为了让文件名发生变化，方便部署，同时方便Nginx服务器重新对该文件进行缓存。

app.css：编译后的CSS文件。
app.js：最核心的js文件，几乎所有的代码逻辑都会打包到这里。
manifest.js：生成的周边js文件。
vendor.js：生成的vendor.js文件。

另外，每个.map文件都非常重要。可以简单地认为，有了.map文件，浏览器就可以先下载整个.js文件，然后在后续的操作中“部分加载”对应的文件。

切记这个文件夹不要放到git中。因为每次编译之后，这里的文件都会发生变化。

3.6.4　node_modules文件夹

node项目所用到的第三方包特别多，也特别大。这些文件是由命令$ npm install产生的。所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。

package.json:

// ...
"dependencies": {
  "vue": "^2.3.3",
  "vue-resource": "1.3.3",
  "vue-router": "^2.3.1",
  "vuex": "^2.3.1"
},
"devDependencies": {
  "autoprefixer": "^6.7.2",
  "babel-core": "^6.22.1",
  "babel-loader": "^6.2.10",
  "babel-plugin-transform-runtime": "^6.22.0",
  "babel-preset-env": "^1.3.2",
  "babel-preset-stage-2": "^6.22.0",
  "babel-register": "^6.22.0",
  //...
}
// ...

node_modules文件夹中往往会有几百个文件夹，如图3-24所示。

图3-24　node_modules文件夹

注意，这个文件夹不能放到git中。

3.6.5　src文件夹

src文件夹是核心源代码的所在目录。展开后如下所示（不同版本的vue-cli生成的目录会稍有不同，不过核心都是一样的）：

▾ src/
    assets/
    logo.png
    components/
    Book.vue
    BookList.vue
    Hello.vue
   router/
    index.js
   App.vue
  main.js

assets文件夹用到的图片都可以放在这里。
components用到的“视图”和“组件”所在的文件夹（核心）。
router/index.js是路由文件，定义了各个页面对应的url。
如果index.html是一级页面模板的话，App.vue就是二级页面模板。所有的其他Vue.js页面都作为该模板的一部分被渲染出来。
main.js没有实际的业务逻辑，但是为了支撑整个Vue.js框架，很有必要存在。

第3章 Webpack+Vue.js开发准备

第3章 Webpack+Vue.js开发准备

3.1 学习过程

3.1.1 可以跳过的章节

3.1.2 简写说明

3.1.3 本书例子文件下载

3.2 NVM、NPM与Node

3.2.1 Windows下的安装

3.2.2 Linux、Mac下的安装

3.2.3 运行

3.2.4 使用NVM安装或管理node版本

3.2.5 删除NVM

3.2.6 加快NVM和NPM的下载速度

3.3 Git在Windows下的使用

3.3.1 为什么要使用Git Bash

3.3.2 安装git客户端

3.3.3 使用Git Bash

3.4 Webpack

3.4.1 Webpack功能