前端工程化-NPM

1．什么是NPM

NPM代表npmjs.org这个网站，这个站点存储了很多Node.js的第三方功能包。
NPM的全称是Node Package Manager，它是一个Node.js包管理和分发工具，已经成为非官方的发布Node模块（包）的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段，并且通过NPM管理需要分享的代码也很方便、快捷和简单。
NPM最初用于管理和分发Node.js的依赖，它自动化的机制使得层层嵌套的依赖管理变得十分简单，因此后来被广泛应用于前端依赖的管理中。
NPM是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题，常见的使用场景有以下几种：
（1）允许用户从NPM服务器下载别人编写的第三方包到本地使用。
（2）允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
（3）允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

NPM安装

由于Node.js已经集成了NPM，所以在安装Node.js时NPM也一并安装好了。所以可以在cmd终端输入npm-v来测试是否安装成功。命令如图所示，如果出现版本提示则表示安装成功。
温馨提示：由于NPM的仓库源部署在国外，资源传输速度较慢且可能受限制，所以大家可以直接使用NPM安装其他依赖，也可以使用淘宝的镜像源CNPM（CNPM是淘宝团队在国内开发的一个相当于NPM的镜像，可以用CNPM代替NPM来安装依赖包）。
安装CNPM命令，我们通过打开命令行工具（Win+R），输入：

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

这样就可以使用淘宝定制的CNPM（gzip压缩支持）命令行工具代替默认的NPM，当然大家也可以选择不安装，不代替NPM。

基本使用

在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如WebPack或Browserify模块打包器配合使用。在7.1.1节中将Vue环境搭建完成后，本节可以利用Vue提供的Vue-cli脚手架快速建立项目，步骤如下：
（1）搭建第一个完整的Vue-cli脚手架构建的项目。
Vue-cli是用Node编写的命令行工具，我们需要进行全局安装。打开命令行终端，输入如下命令：

npm install -g vue-cli

然后等待安装完成，如图
注意：只需第一次构建脚手架项目时执行上述命令，以后的Vue项目构建从第（3）步开始。
（2）安装完成后，在命令行输入vue-V，如果出现相应的版本号，则说明安装成功，如图

（3）我们可以使用Vue-cli快速生成一个基于Webpack模板构建的项目，如图
所示，项目名为vue-project。

首先需要在命令行中进入项目目录，然后输入如下命令：

//cd $ 自定义路径$(如:D:\Web前端\VueCode)
vue init webpack vue-project

（4）配置完成后，可以看到目录下多出了一个项目文件夹，里面就是Vue-cli所创建一个基于Webpack的Vue.js项目。
然后进入项目目录（如：cd　vue-project），使用npm install安装依赖，如图