windows下搭建Vue开发环境

一、安装node.js

1、根据地址，下载免安装版本，并解压如下

https://nodejs.org/en/download/

2、配置变量，先将路径修改为：D:\workset\feset\nodejs

1）在D:\workset\feset\nodejs下新建文件夹node_cache和node_global

2）新建系统变量，并将其添加到PATH下

a）NODE_PATH：D:\workset\feset\nodejs（任意目录下可使用npm、node等命令）

b）NODE_GLOBAL：D:\workset\feset\nodejs\node_global（任意目录下可使用cnpm、vue等命令）

3）打开cmd终端，输入node -v 和 npm -v 测试变量是否配置成功

4）设置缓存路径和全局模块存放路径

npm config set cache “D:\workset\feset\nodejs\node_cache”
npm config set prefix “D:\workset\feset\nodejs\node_global”
　　3、安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
　　二、安装vue及命令行工具vue-cli脚手架

cnpm install vue -g
cnpm install vue-cli -g
　　三、创建项目

1、cmd终端进入D:\workset\feset\vue，执行初始化命令，webpack、webpack-simple都是常用模板，根据需要选择

vue init webpack vueDemo
　　2、根据提示选择需要的安装项

复制代码
Project name vuedemo（输入项目名）
Project description A Vue.js project（输入项目描述）
Author sl（输入作者）
Vue build runtime
Install vue-router? No（是否安装路由）
Use ESLint to lint your code? Yes（是否安装ESLint）
Pick an ESLint preset none
Set up unit tests No（是否安装unit test）
Setup e2e tests with Nightwatch? No（是否安装e2e test）
Should we run npm install for you after the project has been created? (recommended) no（是否自动npm install创建项目）
复制代码
　　3、开始安装并运行

D:\workset\feset\vue>cd vueDemo
D:\workset\feset\vue\vueDemo>npm install
D:\workset\feset\vue\vueDemo>npm run dev
　　4、访问测试，浏览器输入http://localhost:8080/