偏前端 - vue-cli之（node.js）的安装及环境变量的配置、环境搭建

第一步：下载安装文件

下载地址：官网http://www.nodejs.org/download/ 

 

 

 

 

第二步：安装nodejs

下载完成之后，双击 node-v0.8.16-x86.msi，开始安装nodejs，默认是安装在C:\Program Files\nodejs下面

 

第三步：安装相关环境

打开C:\Program Files\nodejs目录你会发现里面自带了npm,直接用npm安装相环境既可

 进入node.js command prompt 命令窗口

进入nodejs 安装目录 C:\Program Files\nodejs

键入命令：cd C:\Program Files\nodejs 既可

现在开始安装相关环境

键入命令：npm express 回车等待安装express........

1. 在命令行中执行 "npm install -g express"等待下载并且自动完成安装。测试express完成安装的一个方法就是查看其版本号，执行命令 “express -V”正常情况下回输出版本号如图，但有遇到不正常情况的，会提示“express不是内部或外部命令”，这样问题就来了，这是什么原因呢？

   
2. 5

   有两种可能：①在第二步安装node是没有添加环境变量，这种情况把node添加的环境变量即可解决。②express 4.x版本中将命令工具分出来了，需要再安装一个命令工具，执行命令“npm install -g express-generator”完成后再测试就可以了。

键入命令：npm jade 回车等待安装jade........

键入命令：npm mysql回车等待安装mysql........

........安装什么组件，取决于环境搭建需求

npm作为一个NodeJS的模块管理，之前我由于没有系统地看资料所以导致安装配置模块的时候走了一大段弯路，所以现在很有必要列出来记录下。

①、我们要先配置npm的全局模块的存放路径以及cache的路径，例如我希望将以上两个文件夹放在NodeJS的主目录下，便在NodeJs下建立"node_global"及"node_cache"两个文件夹。如下图

②、启动cmd，输入

npm config set prefix "C:\Program Files\nodejs\node_global"
以及
npm config set cache "C:\Program Files\nodejs\node_cache"

③、现在我们来装个模块试试，选择express这个比较常用的模块。同样在cmd命令行里面，输入“npm install express -g”（“-g”这个参数意思是装到global目录下，也就是上面说设置的“C:\Program Files\nodejs\node_global”里面。）。待cmd里面的安装过程滚动完成后，会提示“express”装在了哪、版本还有它的目录结构是怎样。如下图

④、关闭cmd，打开系统对话框，“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。如下图

⑤、进入环境变量对话框，在系统变量下新建"NODE_PATH"，输入”C:\Program Files\nodejs\node_global\node_modules“。（ps：这一步相当关键。）

2014.4.19新增：由于改变了module的默认地址，所以上面的用户变量都要跟着改变一下（用户变量"PATH"修改为“C:\Program Files\nodejs\node_global\”），要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误。

⑥、以上步骤都OK的话，我们可以再次开启cmd命令行，进入node，输入“require('express')”来测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。如下图（如出错一般都是NODE_PATH的配置不对，可以检查下第④⑤步）

 

---

 

以上node安装步骤确认无误的话，下面开始我们的vuecli的安装

 

1.运行cmd,安装vue的脚手架工具/官方命令行工具

npm install --global vue-cli  /   cnpm install --global vue-cli

 

2.创建项目

2.1cd 到对应的项目文件夹里

2.2vue init webpack vue-demo01(里面注意  eslint/选No, vue-router/选yes )

 

2.2如果上面的安装没有成功，那么(cd vue-demo01,cnpm install   /    npm install

2.3如果上面2步都还是出错的话，重启下电脑再npm install(今天早上我就是这么莫名其妙的好了）

 

2.3npm run dev