安装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开发环境配置完成。可以进入项目文件,查看项目文件结构,如下图所示: