快速搭建Vue开发环境搭建及热更新（一）

本篇文章介绍怎样快速搭建一个本地Vue开发环境，Vue是目前非常火的一个前端框架，和Angular、react并驾齐驱，好了不多说了，进入正题。

1、首先要安装node.js

因为Vue的运行是要依赖于node的npm的管理工具来实现的，可以到node.js的官网下载node.js，下载地址:https://nodejs.org/en/下载对应的版本安装，这里我选择是64位系统，如下图所示。

安装好node之后，dos窗口输入node -v，npm -v 命令会出现如下界面,说明安装成功

2、安装淘宝镜像，

这里说下为什么要安装淘宝镜像，因为在国内用npm的包管理工具是非常慢的，淘宝的cnpm命令管理工具可以代替默认的npm管理工具

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装Vue脚手架

安装好淘宝镜像之后，安装vue脚手架，

输入命令：cnpm install --global vue-cli，安装完成之后输入命令vue出现如下界面说明脚手架安装成功

4、创建一个新的项目

搭建完脚手架之后就可以创建一个vue项目了，建议不要装在系统盘，我是装在F:\VUE下面，在此目录下打开dos命令行工具

输入命令：vue init webpack my-project，创建项目会有一些配置项，ESLint，unit tests, e2e, 都可以选择no，暂时用不到

5、更新依赖,运行项目

输入命令：cd my-project回车，进入到项目目录。再输入命令：cnpm install，回车安装项目需要的依赖，安装完成后输入命令：cpnm run dev，运行项目出现如下图所示，即代表项目运行成功：

6、访问项目：

浏览器输入localhost:8080回车即可，默认的端口是8080，下图所示就是项目的首页面：

这样就完成了你的第一个Vue环境搭建和Vue之旅哦~

7、环境的热更新，在vue-cli工程中，webpack默认是自动启动热更新，如编辑某一个Vue文件，项目自动更新部署生效