安装vue-cli

一、需要安装的工具

1、nodejs
2、npm和cnpm
3、vue-cli

二、安装Node.js

什么是Node.js

一个让 JavaScript 运行在服务端的开发平台，也是vue的环境

官网下载的地址：

http://nodejs.cn/download/

Node.js的安装

1、进入官网后，点击安装，如图

2、然后点击安装，选择自己要安装的路径，此处我选择的是：D:\Program Files\nodejs ，安装至完成

3、检验是否安装成功。 按快捷键window+R，打开命令提示符窗口，输入：

npm -v

如图：

三、安装npm和cnpm

什么是npm、cnpm

1、npm：软件包管理工具，nodejs的包管理工具
2、cnpm：Node.js 淘宝镜像加速器

安装npm

改变npm原有的环境变量

1、下载并安装好node.js后，npm基本也安装好了
2、首先配置npm的全局模块的存放路径、cache的路径，此处我选择放在：D:\Program Files\nodejs ，输入如下命令：

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache"D:\Program Files\nodejs\node_cache"

完成后可以在文件夹中看到相应名字的文件夹，如下：

3、在系统环境变量添加NODE_PATH,输入路径为： D:\Program Files\nodejs\node_global

• 操作如下：我的电脑右击，打开属性->高级系统设置->环境变量->新建（系统变量下）->输入变量名NODE_PATH->变量值：输入上面路径，确定即可
• 如图：

4、在命令行输入以下命令安装express

• “-g”表示安装到global目录下，就是上面设置的node_global中
• 输入命令：

npm install express -g

5、在命令行输入node进入编辑模式

• 输入以下代码检测是否能正常加载模块：

require('express')

6、如果成功，如上图显示；如果出错，检测下上面配置的NODE_PATH是否配置或者配置正确。

7、若出现Error: Cannot find module ‘express’

• 第一种解决方案： 在当前的目录(nodejs的安装目录)或直接打开cmd
• 输入命令：

npm link express

• 即可解决
• 第二种解决方案：添加express的全局变量的路径
• express的文件在node_module下
• node_module的文件在nodejs的安装路径下
• 如图：

安装cnpm

1、安装cnpm

• 输入以下命令

npm install cnpm -g

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

• 如下图

2、检测是否安装成功

• 输入命令

cnpm -v 

• 但是这里会报错。 报错则继续往下看

3、添加系统变量path的内容

• 因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm
• 如图，修改系统变量path
  
• 再次检验cnpm是否安装成功
• 输入

cnpm -v 

4、安装vue-cli

cnpm install vue-cli -g

• -g：即全局

5、测试vue-cli是否安装成功

vue list