什么是npm?

是nodeJS的一个程序包管理和分发的管理工具，npm完全用JavaScript写成，它可以让全世界与Web前端相关开发者共享代码，非常方便的使用各种插件、库和框架，无需再到处去搜寻需要用到的这些程序，如：Bootstrap、jQuery、Vue。目前的npm已经被集成到了nodejs中，也就是说现在只要你下载了nodejs就可以使用npm了。

 一句话就是：web程序包管理器

使用npm有什么好处

以前我们下载一个需要用到的程序（插件、库和框架）总是需要在搜索引擎里输入该程序的关键字，然后再在搜索出的结果中筛选出我们真正需要的程序，期间难免会误进入一些广告、钓鱼、挂木马等网站，或者下载下来的程序包含病毒、木马程序，又或者下载到的程序版本非常旧等问题。就算勉强躲过了这些，找到了程序官网所在的地址，在一页英文网站中找到适合自己计算机系统或正确版本的程序又得花上一些时间，特别是对英文基础较差的开发者来说。

我们以jQuery的下载为例来谈谈传统开发者要下载jQuery这个库的繁琐步骤。

1. 打开浏览器
2. 在搜索框内输入jquery确定搜索
3. 点击jQuery的“正确”官网链接跳转进jQuery的官网
4. 找到相应的下载按钮并点击
5. jQuery会跳转到下载页，在这里有几个版本，分别是production版（生产环境版，即压缩版）、 development（开发版，即未压缩版）以及source map（资源镜像）。除此之外，在这些链接的下方还包含了“精简”后的各种环境版本
6. 找到自己需要的版本点击下载

以上是传统模式非常繁琐，然而，对于以上操作使用npm下载来说，只需要两个步骤：

1. 打开系统命令行工具
2. 输入命令：npm install jquery

不仅如此，通过这种方式下载的jQuery文件是一套较为完整的jQuery架构文件，里面不仅包含了jQuery的各种场景所需版本，甚至还提供了模块化开发所需的各种JS模块文件，对于熟悉jQuery的人来说，使用这些模块最终会使得最终生成的jQuery非常的小

除此之外，npm还能下载指定版本的程序包，比如现在我们需要下载一个支持IE8的jQuery版本（1.x版），可以这样输入命令：

npm install jquery@1

同理，如果需要的是v-2.x的版本还可以

npm install jquery@2

对于其它程序包需要下载当前大版本的最新版仍然可以用这种方式，比如要下载现在bootstrap最常用的第三版：

npm install bootstrap@3

可以说是相对以往的任何方式都更加方便了。

安装npm

npm原本是node的单独项目，但现在在Windows系统和OS X系统中，npm已经北极集成到了nodejs中，也就是说现在只要你下载了nodejs就可以使用npm了。点击下方的链接进入下载页，再根据你当前的操作系统下载指定的版本（下错了不能正常运行，卸载还麻烦）。

一直Next

路径最好选择一个比较容易查找的（盘符的根目录是最好的选择）

默认就省去配置变量的步骤了

点击Install安装

点击Finish完成

查看目录是否有以下的文件

更改npm的全局安装路径

npm的默认安装路径是在当前计算级用户目录下的一个隐藏文件AppData下面的文件夹里（看不见的AppData文件夹）每次要使用到我们安装程序包的一些单独的分发文件（Dist File）非常不方便，所以我们需要创建一个自定义的目录，让每次通过npm全局安装的程序包都能在这个目录下面以便于我们统一管理。

打开cmd

查看当前npm全局安装路径位置的命令是：

npm config get prefix

要设置npm的全局安装的目录有两种方法。

第一种，打开命令行窗口，分别输入以下命令：

npm config set prefix "D:\npmjs" （全局安装程序包的目录）

npm config set cache "D:\npmjs\cache" （全局缓存的目录）

注意盘符里的文件夹都是我们预先创建好的，盘符自己根据需要选择，文件夹名也可以根据习惯自定。

第二种，找到npm文件夹下一个叫做npmrc的文件，用notepad++等文本编辑器打开进行编辑。

<特别注意>如果做了自定义全局安装的路径，也要将当前文件夹所在的路径也要添加进“系统环境变量”里，否则以后安装的一些带命令的程序包（如：cnpm、gulp、webpack、babel等）的命令都会无效。（如上配置的话，配置全局变量的PATH路径就应该是“D:\npmjs”了）

这样一来，我们通过全局安装的程序包就会在你创建的npmjs指定的文件夹内了。

现在我们就用npm来下载第一个程序包“jquery”吧，在命令行窗口输入以下命令：

npm install -g jquery

或者

npm install jquery -g

其中-g表示的是全局，如果不加上该指令，程序包会安装在你命令行内当前指定的目录下，这样不便于以后的管理，所以，我们在安装程序包的时候应该总是加上-g这个指令。

等待jQuery安装完成后，我们进入自己刚才自定义的全局目录下，不出意外的话在该文件夹内多出一个文件夹node_modules，我们以后下载的所有程序包都会存放在这个文件夹里（这个文件夹我们不要去改它的名字，否则里面的模块在进行AMD模式开发的时候将不能正常使用）。

打开这个文件夹，看看我们刚才下载的jquery是否已经在这里了，打开jquery文件夹应该是下面这样。

那么，恭喜你！你的npm已经能够正常使用了。

对npm提速的cnpm

由于npm是国外的服务器，在国内使用很多时候会不稳定，出现下载“假死”或速度过慢的现象（如果出现这样的情况我们可以Ctrl+C结束进程）。为了解决这个问题阿里集团的一个团队为npm创建了一个国内的服务器镜像——淘宝镜像（cnpm），它以10分钟为单位保持与国外npm服务器的同步频率。也就是说我们直接可以通过淘宝镜像去下载或更新我们的程序包，而不必去忍受缓慢的程序包下载速度了。

要安装淘宝镜像，需要在命令行中输入以下命令：

输入命令npm install -g cnpm --registry=https://registry.npm.taobao.org安装镜像站

但这样一来我们在下载程序包的时候应该使用的命令是cnpm（前面多了个“c”）而不是npm了。

安装完淘宝镜像之后，我们手动删除刚才下载的jquery程序包，再通过淘宝镜像来下载一次吧：

cnpm install -g jquery

安装完成之后记得去检查一下我们全局下载文件夹内的jquery是否下载成功。

删除程序包

要删除通过npm安装的程序包，可以使用以下命令：

npm uninstall <包名>

或

npm uninstall -g <包名>

测试NPM安装vue.js

命令：npm install vue -g

这里的-g是指安装到global全局目录去

测试NPM安装vue-router

命令：npm install vue-router -g

安装vue脚手架

运行npm install vue-cli -g

因为VUE脚本在自定义的npmjs目录下不在path环境变量

重新打开CMD，并且测试vue是否使用正常

注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js 中。

命令：vue init webapck vue01

出现？开头的不动一直回车键到加载

初始化，安装依赖

npm run dev（运行dev）

自动打开浏览器http://localhost:8080/#/

npm run build

生成静态文件，打开dist文件夹下新生成的index.html文件