小白也能10分钟快速搭建VUE开发环境

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。那么下面大家一起看看如何来搭建Vue开发环境的吧。（老司机绕道而行）

第一步：安装Node

1.先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/download/，(我使用的Win10系统，所以下载的是windows版本的哈！）

2.检查Node安装是否成功，如下图所示：点击“以管理员身份运行”，输入命令：node -v    回车  查看node版本号，出现版本号则说明安装成功

第二步：安装淘宝npm镜像

由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.
淘宝的cnpm命令管理工具可以代替默认的npm管理工具

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

第三步：安装全局vue-cli脚手架

淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli  回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

输入命令：cnpm install --global vue-cli

第四步：创建一个新项目

搭建完手脚架之后，我们要开始建一个新项目：输入命令：vue init webpack myproject_first

"my-project-first"是自身创建的项目文件夹名，那有人会问：通过这个命令创建的项目文件夹在哪找呀？别急，继续往下看。

Node默认安装的路径是在C盘，启动Node命令窗体我们可以看到输入的命令所执行的文件路径，如下图所示：

因为创建Vue项目都比较大，在这建议大家不要直接在默认的路径上输入命令，如要切换盘符，直接输入  盘符编号+英文状态下的冒号即可，如输入 I:   回车，这时再输入创建项目命令：vue init webpack myproject_first，那么项目文件夹就在I盘下

创建项目之后，一直按回车，直到出现是否要安装vue-route，这个我们在项目中要用到，所以输入y 回车，其他的暂时用不到，则输入n 回车

第四步：进入项目文件夹，并在项目里安装依赖

输入命令：cd myproject_first  回车，在项目里安装依赖，输入命令：cnpm install

第五步：运行项目

输入命令：cnpm run dev  回车 弹出一个浏览器访问地址：http://localhost:8080

第六步：启动浏览器输入地址：http://localhost:8080访问

到此为止，vue开发环境搭建完毕!

小贴士：如何修改默认的端口？

在项目目录下有一个config文件夹，看名字就知道与配置有关，打开config目录下的index.js，这里不仅可以改变端口，还可以根据需要改变其他配置信息。

更多Vue学习教程请点击下方链接：

https://www.vue-js.com/

https://cn.vuejs.org/v2/guide/

http://www.runoob.com/vue2/vue-tutorial.html

寄语：感谢您花时间来阅读这篇文章，如果觉得对您有帮助请点个赞呗！