vue---NPM的简介及使用

一、为什么要学习 NPM?（NPM 的作用）

我们后续需要用它去下载安装相应 js 库与各种插件（模块）等，比如 vue.js、vue-router.js、axios.min.js、vuex，并且使用频繁。npm 是各种 包管理器，用来下载安装、卸载各种依赖文件（第三方插件）。

二、NPM 是什么？与 Node 的关系

NPM 的全称是 Node Package Manager，即 Node 包管理工具，那么 Node 又是什么？即指 Node.js，Node.js 是一个能够在服务器端运行 JavaScript 的开放源代码、跨平台 JavaScript 运行环境。
解释两点：
（1）跨平台：Node.js 的程序可以在 Microsoft Windows、
Linux、Unix、Mac OS X 等服务器上运行。
（2）通俗说这个环境可以使 JavaScript 用于服务端的编程，原先 JavaScript 只能用于前端编程，服务端需要用 PHP、Python、JAVA、C#等。Node.js 使前后端更加一体了，十分方便。

Node.js 主要模块是用 JavaScript 编写的，因此 npm 也就是JavaScript 的包管理工具，而且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码，管理项目依赖关系。目前的 Node.js 安装包中已经包含了 npm。

三、本地安装模块（js 库）

安装的主要模块就是相关 js 库，有本地安装和全局安装两种方式。这节学习本地安装。把 js 库安装到当前执行安装命令时所在的目录下，也就是说本地安装的 js 库，只有本项目有用。
语法：npm install <module name>[@版本号]

四、安装指定版本的 js 库

如下图所示，安装指定版本号的 bootstrap，通过@指定版本号为 3.3.7。注意：指定的版本号一定要存在的，否则会报错，安装不成功的。

五、全局安装模块（js 库）及查看已安装的 js 库

5.1、如何通过命令查看全局安装位置

如果多个项目要共同使用/引用某一个 js 库，就要使用全局安装，也就是安装在一个公共位置（全局安装位置）。那么公共位置在哪呢？这就是在 1.3 节中配置的全局安装路径。我们也可以通过命令查看。

语法：npm root –g

5.2、 npm 全局安装 js 库

语法：npm install <module_name> -g

g 代表 global 全局安装的意思。
如 下 表 示 全 局 安 装 vue ， 此 时D:\Program\Files\nodejs\node_global\node_modules 文件夹下就会看到 vue文件夹，vue 文件夹下就会有 vue.js 等相关文件。

5.3、 如何查看全局安装了哪些 js 库

语法：npm list -g 或 npm ls -g

六、 生产环境和开发环境依赖模块的安装

6.1、 生产环境依赖模块的安装

如果项目中用到的 js 库（例如 vue、axios、element ui、echarts）在项目最后打包上线后需要用到，就要使用生产环境依赖的安装。

语法：npm install <module name> [--save|-S] 
-S 为--save 的简写，同样 install 可简写为 i

就是在后面增加了–s 或-S 参数【前面是英文的两个-，后面是一个-】，安装后会自动把模块和版本号添加到 package.json 中的 dependencies 对象中，简称 dep，就是指生产环境依赖。

6.2、 开发环境依赖模块的安装

如果项目中用到的 js 库（例如 eslint 语法格式检查的需要，课程后续都会用到）在项目最后打包上线后不需要用到，就使用开发环境依赖的安装。

语法：npm install <module name> [--save-dev|-D] 
（|后面的简写）

就是在后面增加了–save-dev 或-D 参数，安装后会自动把模块和版本号添加到 package.json 中的 devDependencies 对象中，简称 dev，就是指开发环境依赖。
说明：参数--save-dev 或-D 放在<module name>前面也行。

七、cnpm 命令的安装及批量下载模块

7.1、cnpm的安装

cnpm 命令作用就是加快模块的下载速度。通过 npm 命令安装模块是从国外服务器下载，速度往往比较慢。
国内服务器有没有下载呢？乐于分享的淘宝团队干了这事。来自官网：“这是一个完整npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为10 分钟一次以保证尽量与官方服务同步。”
注意，没有安装直接输入 cnpm 命令会报错的哦。
怎么安装 cnpm 命令呢？
前提也需要先安装 node.js，当然我们 npm 命令有用，那么node.js 肯定安装了。接下来只要在 cmd 窗口中输入如下命令：（一般都全局安装）

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

等待一会就会显示安装成功，再输入 cnpm 命令就不会报错了。

cnpm 跟 npm 用法基本一致，只是在执行命令时将 npm 改为cnpm。以后一般可采用 cnpm 命令代替 npm。

7.2、 批量下载模块

我们从网上去下载一些 vue 的相关项目源码，你会发现一般没有 node_modules 文件夹，也就是说所有相关依赖的文件都没有的，但 是 会 有 package.json 文 件 ， 这 个 时 候 我 们 就 需 要 根 据package.json 文件去安装所有相关依赖。然而在上面的 npm-demo1 项目中我们下载安装的 vue、bootstrap、jquery、eslint 等是一个个去下载安装的。如果还一个个去安装太累了（实际项目会有更多的依赖模块），那么如何批量下载安装呢？只需要进入 package.json 文件所在目录，也就是项目的根目录，打开 cmd 窗口，输入 npm install 或 cnpm install，当然建议选择后面的。

例：现在把npm-demo1项目中的node_modules文件夹删除，先需要根据 package.json 文件去安装所有相关依赖。package.json文件中的 4 个相关依赖如下图所示。


说明：此时你到项目根目录有可以看到 node_modules 文件夹及其下面一大堆的文件夹。

八、package.json 文件初步认识

打开 package.json 文件（尚没有安装 VS Code，可以用
Notepad 工具打开）后，内容如下，发现就是我们基本为我们自己设置的参数信息（在上面的 cmd 窗口中也有）。但是下面红色参数Scripts 在初始化时我们没有设置。它的含义是：表示项目运行的脚本信息，是一个对象，本身里面又可以包含很多对象，即，键值对信息，默认有一个对象，键为”test”,表示测试开发环境，后面的值表示运行的脚本。后续课程开发中我们一般会设置 “dev”或“serve”去启动项目的。

{ "name": "npm-demo1",
 "version": "1.0.0",
"description": "firstproj", 
"main": "index.js", 
"scripts": { "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [ "npm" ],
"author": "xuzhaoxing", "license": "ISC"
}

说明：后面我们开发项目中生成的 package.json 文件不会这么简单，还会有文件"dependencies" 、"devDependencies"的值（表示生产环境、开发环境的依赖），表示相关依赖。有了 package.json文件文件，直接使用 npm install 命令自动安装和维护当前项目所需的所有依赖模块。

九、几个常用的npm命令

1. npm uninstall –g <module> # 卸载全局模块 
2. npm list | ls # 查看本地安装的所有模块
3. npm list | ls <module name> # 查看本地安装的指定模块，
4. npm/cnpm view <module name> vers # 查看模块的最新版本
5. npm -rf node_modules/ # 删除已安装的模块
6. npm cache clean # 清除 npm 内部缓存
7. npm install # 重新安装
8. cnpm view <module name> versions # 查看模块的所有版本
9. cnpm uninstall <module nam> # 卸载本地模块