windows环境下vue开发环境搭建

vue环境搭建

浏览器 chorme

IDE:VS code 或者 WebStorm

Node.js 8.9+ ,npm

先下载 node.js 然后安装

https://nodejs.org/en/

 

下载了 windows版64位 node.js 安装

cmd 进入 dos 输入 node -v 检查 node 安装上没有

这样就已经是安装成功了，由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用

https://registry.npm.taobao.org；

 

1、在nodejs安装路径下，新建node_global和node_cache两个文件夹

设置缓存文件夹

npm config set cache "C:\Program Files\nodejs\node_cache"

设置全局模块存放路径

npm config set prefix "C:\Program Files\nodejs\node_global"

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

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

完成之后

通过命令配置

npm config set registry https://registry.npm.taobao.org

验证命令 如果返回https://registry.npm.taobao.org，说明镜像配置成功。

npm config get registry

npm info express

设置系统环境变量 PATH

以上两个红框信息都不能少

再新建系统环境变量 NODE_PATH

检查 cnpm是否已经安装好 命令 cnpm -v

执行安装命令

cnpm install vue -g

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

cnpm install vue-cli -g

创建一个vue的工作空间 如 E:\vueSpace

cmd 进入该目录后建一个测试vue工程 mytest 命令如下

vue init webpack-simple mytest

一路回车至完成

查看目录

 

3、安装工程依赖模块

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

cd mytest

cnpm install

此时目录如下

4、运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。

cnpm run dev

此时浏览器弹出页面

此时vue 开发环境搭建完成

开发工具vscode 去官网下载

https://code.visualstudio.com/下载完成后安装