初学者如何配置vue开发环境

安装node.js

在node.js中文网下载需要的版本，如下图所示（现在的版本比图中的高）：

此次安装是在win7 64位环境下，所以选择windows相应安装包，下载完成后直接双击默认安装即可（建议不要安装在系统盘即C盘，我这里只有C盘）。

配置nodejs prefix（全局）和cache（缓存）路径

在nodejs安装路径下，新建node_global和node_cache两个文件夹，如下图所示：

打开命令行，设置缓存文件夹，输入如下命令：
npm config set cache " C:\nodejs\node_cache "
设置全局模块存放路径，输入命令：
npm config set prefix " C:\nodejs\node_global "
设置成功后，之后用命令npm install XXX -g安装以后模块就在C:\nodejs\node_global 里。

基于 Node.js 安装cnpm（淘宝镜像）

在命令行中输入命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后安装模块可直接使用cnpm命令（由于网络原因，使用国内镜像比国外快很多）。

设置node环境变量

说明：设置环境变量可以使得在任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径。
（1）鼠标右键"计算机"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。
（2）修改用户变量PATH，将带有AppData\Roaming\npm的路径改为C:\nodejs\node_global，如下图所示：

（3） 新增系统变量NODE_PATH,如下图所示：

（4）使用命令node -v可查看node版本，如下图所示：

创建并运行vue项目

1. 安装vue-cli脚手架构建工具：
在命令行中输入命令 npm install -g vue-cli （也可用cnpm），然后等待安装完成，执行命令 vue -V（注意这里的v是大写的）可查看vue版本：

2. 跳转到需要创建vue项目的目录，在该目录下输入命令vue init webpack porjectNme，然后需要输入新建项目的相关信息，系统会下载相关模板，如下图所示：

项目创建完成后如下图所示：

cd进入项目目录，执行
npm install -s 安装项目依赖的模块
npm run dev运行项目，如下图所示：

可以看到访问地址为：http://localhost:8080，在浏览器中输入该地址，如下图所示：

到此，Vue开发环境配置完成。可以进入项目文件，查看项目文件结构，如下图所示：