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/