windos环境安装Vue及配置环境

一.下载node.js包

选择与匹配的版本即可

node官网

二.安装node.js

选择自己需要放置的路径，建议不要安装在系统盘（如C：）
点击下一步即可

安装

三.设置nodejs prefix（全局）和cache（缓存）路径

A.在node.js安装路径下，新建node_global和node_cache两个文件夹

设置路径
B.设置缓存文件夹
1.win+r
2.输入cmd打开Dos窗口
3.输入如下命令：
设置缓存文件夹
复制如下：
设置缓存文件夹：
（路径为刚上面创建的node_cache，node_global文件夹路径）

npm config set cache "E:\Program Files\node\nodePackge\node_cache"

设置全局模块存放路径：

npm config set prefix "E:\Program Files\node\nodePackge\node_global"

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

npm install -g cnpm --registry=https://registry.npm.taobao.org

四.设置环境变量
A.鼠标右键"此电脑"，
B.选择“属性”菜单，
C.在弹出的“系统”对话框中左侧选择“高级系统设置”，
D.弹出“系统属性”对话框
新增系统变量NODE_PATH

NODE_PATH
E:\Program Files\node\nodePackge\node_global\node_modules

注意：路径后多加了：node_modules

配置环境变量
修改系统变量PATH

E:\Program Files\node\nodePackge\node_global

修改系统变量PATH
编辑

五.安装Vue

cnpm install vue -g

六.安装vue命令行工具，即vue-cli 脚手架

cnpm install vue-cli -g

图示

七.检查Vue是否安装成功

返回版本号则说明安装成功，注意V是大写，小写不成功

vue -V

检查图示

八.创建新项目测试
1.新建文件夹：
F:\TopsTest
2.根据模版创建新项目
在当前目录下输入“vue init webpack-simple 项目名称（使用英文）

vue init webpack-simple testTops

打开存放新建项目的文件夹

需要输入项目的基本信息:
Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。
Project description:项目描述，默认为A Vue.js project。直接回车，不用编写。
Author：作者，如果你有配置git，他会读取.ssh文件中的user。
Install vue-router? 是否安装vue的路由插件。Y代表安装，N无需安装，下面的命令也是一样的。
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。建议N。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。
Should we run npm install for you after the project has been created?(recommended) 选择npm。

项目结构说明

3.安装工程依赖模块
定位到testTops的工程目录下，
安装该工程依赖的模块，
这些模块将被安装在：testTops\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules

cnpm install

4.运行该项目

cnpm run dev

测试运行