npm（Node Package Manager）

一、由来

前端是怎么共享代码的呢？

1、在 GitHub 还没有兴起的年代，前端是通过网址来共享代码

比如你想使用 jQuery，那么你点击 jQuery 网站上提供的链接就可以下载 jQuery，放到自己的网站上使用

2、GItHub 兴起之后，社区中也有人使用 GitHub 的下载功能：

3、麻烦

当一个网站依赖的代码越来越多，程序员发现这是一件很麻烦的事情：

1. 去 jQuery 官网下载 jQuery
2. 去 BootStrap 官网下载 BootStrap
3. 去 Underscore 官网下载 Underscore
4. ……

有些程序员就受不鸟了，一个拥有三大美德的程序员 Isaac Z. Schlueter （以下简称 Isaaz）给出一个解决方案：用一个工具把这些代码集中到一起来管理吧！

这个工具就是他用 JavaScript （运行在 Node.js 上）写的 npm，全称是 Node Package Manager

4、具体步骤

NPM 的思路大概是这样的：

1. 买个服务器作为代码仓库（registry），在里面放所有需要被共享的代码

2. 发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上，分别取名 jquery、bootstrap 和 underscore（注意大小写）

3. 社区里的其他人如果想使用这些代码，就把 jquery、bootstrap 和 underscore 写到 package.json 里，然后运行 npm install ，npm 就会帮他们下载代码

4. 下载完的代码出现在 node_modules 目录里，可以随意使用了。

这些可以被使用的代码被叫做「包」（package），这就是 NPM 名字的由来：Node Package(包) Manager(管理器)。

5、发展

Isaaz 通知 jQuery 作者 John Resig，他会答应吗？这事儿不一定啊，对不对。

只有社区里的人都觉得 「npm 是个宝」的时候，John Resig 才会考虑使用 npm。

那么 npm 是怎么火的呢？

npm 的发展是跟 Node.js 的发展相辅相成的。

Node.js 是由一个在德国工作的美国程序员 Ryan Dahl 写的。他写了 Node.js，但是 Node.js 缺少一个包管理器，于是他和 npm 的作者一拍即合、抱团取暖，最终 Node.js 内置了 npm。

后来的事情大家都知道，Node.js 火了。

随着 Node.js 的火爆，大家开始用 npm 来共享 JS 代码了，于是 jQuery 作者也将 jQuery 发布到 npm 了。

所以现在，你可以使用 npm install jquery 来下载 jQuery 代码。

现在用 npm 来分享代码已经成了前端的标配。

二、npm安装

1、使用之前，我们先来掌握3个东西是用来干什么的。

npm: Nodejs下的包管理器。

webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

开始：

1、下载nodejs

windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到首页的“INSTALL”按钮，直接点击就会自动下载安装了。

如图，下载12.18.0 LTS （推荐给绝大部分用户使用）

双击安装

可以使用默认路径,自动添加环境变量。

一路点Next,最后点Finish完成

2、检查安装目录，检查是否正常

3、打开CMD，检查是否正常

npm的本地仓库在系统盘c盘的用户目录。

4、查看npm的本地仓库，输入命令npm list -global

5、配置镜像站

输入命令：npm config set registry=http://registry.npm.taobao.org

6、 显示所有配置信息

输入命令npm config list

我们关注一个配置文件.npmrc，可以看到刚才的配置信息

7、检查一下镜像站行不行

命令1

npm config get registry

命令2

Npm info vue //看看能否获得vue的信息

8、更新npm为最新版本

npm install ***为安装或更新命令  -g这个参数的意思是装到gloabal目录下即C:\Users\bobin.yang\AppData\Roaming\npm

更新npm ：npm install npm g

查看npm的版本：npm -v

再次查看global里的模块，现在不为空了，已经读了NPM模块了。

三、npm安装Vue

1、安装vue.js

命令：npm install vue -g

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

2、安装vue-router

命令：npm install vue-router -g

3、安装vue脚手架

运行：npm install vue-cli –g 

查看Vue脚手架的版本，注意字母V为大写。

4、初始化，安装依赖

命令：vue init webpack vue01   

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

项目初始化完成

5、运行npm install安装依赖

6、编译运行

npm run dev

成功界面，提示打开地址http://localhost:8080

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

7、生成静态文件

npm run build

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

8、nmp下新建出来的vue01的目录描述

npm（Node Package Manager）

原文：https://www.cnblogs.com/springsnow/p/13144356.html