Windows下npm 、webpack以及Vue-cli的安装

• npm介绍

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
1.允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2.允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

• npm的安装

由于新版的nodejs已经集成了npm，因此安装Node.js完成后，Npm也安装完成了。

node.js下载地址
node.js安装完成后，配置相应的环境变量


配置完成后，可在cmd中看到对应的npm版本：

此时还需要配置npm的全局模块存放路径以及cache的路径（路径为本地安装node.js的路径）

命令：
npm config set prefix “E:\nodejs\node_global”
npm config set prefix “E:\nodejs\node_cache”
完成后，可进行如下验证：
执行如下命令：（-g 是将express模块安装到 E:\nodejs\node_global 文件夹下（全局模块路径））
npm install express -g

检测是否安装成功，在对应目录下会看到对应的文件，如图：

成功后，可执行如下命令提高npm的执行效率：
npm config set registry=http://registry.npm.taobao.org 配置镜像站
安装npm若出现如下错误：

手动更改 ：C:\Users\zhangbo.BJHUAHUAN.npmrc文件
将对应的路径修改正确。

- 安装cnpm

安装过程类似npm：
安装：
npm install -g cnpm registry=https://registry.npm.taobao.org
查看是否安装成功：
cnpm -v
cnpm会被安装到E:\nodejs\node_global\node_modules下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。

• 安装webpack和vue-cli

webpack安装：

命令行中执行：

• cnpm install webpack -g
  npm install webpack webpack-cli -g
  webpack eb

成功后查看版本：

• webpack -v

vuecli 安装：

命令行中执行：

• cnpm install vue -g
  cnpm install vue-cli -g

成功后查询版本：

• vue -V

• 利用vue脚手架创建一个vue项目platform-startup-ui：

执行命令：
vue init webpack platform-startup-ui （创建项目：platform-startup-ui）
进入项目目录下执行命令安装npm依赖：
cnpm install | npm install

项目目录下运行项目：
npm run dev

可成功访问 http://localhost:8080 即创建成功：