Vue开发环境搭建详解

网上搜索博客、视频试着搭建下Vue的开发环境，过程没有视频里那么顺利，花了我几个小时，但我还是要花半小时来总结一下记录下来，避免下次用个新电脑又得搭建环境浪费时间了，下面是我搭建环境的步骤，与君同享，共同学习，若有错误，欢迎吐槽评论！
另外，我的电脑是win7系统，看的慕课视频用的Linux系统，在使用命令行时很多都不一样的。

1、NodeJS下载安装

可能没有学习过node.js的同学很有疑问，这个下载的作用是什么？我们在学习vue.js时，不一定要是学过node.js的，我们需要的是NodeJS里npm工具，npm是NodeJS下的一个包管理工具，它可以很方便的帮你管理（可以简单理解为下载）各类前端的框架或插件，类似于PHP的composer，Twitter 的 Bower 一样。使用Vue不需要安装NodeJS，这里下载NodeJS只是为了使用其内置的NPM工具，所以不需要你有任何的NodeJS基础，只需要运行 npm install vue 命令，即可把 Vue 的最新版本下载至 node_modules 文件夹。我们可以去官网下载，下面是安装链接:
http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

2、安装vue-cli

（我看的视频和博客没有给出这一步，直接是安装淘宝镜像去了，导致cnpm安装失败了很多次，也不知道是出了什么差错，查找资料费了很多时间才解决）npm实际已经存在nodejs安装文件中~~~

win+R  ，输入cmd，打开DOS命令板：输入命令 “nmp install --global vue-cli”，会出现以下情况：

我们可以用命令行“npm -v”或“node -v”查看安装的版本号，以此来检测是否安装成功：

3、安装淘宝镜像cnpm

我的理解就是，这个能帮助我们更快的加载更多的插件的镜像工具的存在，使用 npm 会导致网速很慢，对于大陆用户，建议将 npm 的注册表源设置为国内的镜像，可以大幅提升安装速度。

1、打开命令行，输入以下命令：

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

2、cnpm下再全局安装vue-cli，输入以下命令：

cnpm install -g vue-cli

查看cnpm版本号，命令行输入“cnpm -v”：

这时候环境大体搭建好了，可以输入“vue”查看：

4、安装webpack，新建项目

项目名为my-first-vue-project,输入命令："vue init webpack my-first-vue-project":

完成后，可在C盘里找到项目文件，用CD命令行查找进入到工程目录里。

5、安装依赖

在命令行下启动cnpm，“cnpm install”：

可以发现，项目加载了一个node的组件：

6、启动项目

输入命令行：“npm run dev”，我这时候就出错了，因为之前我设置了8080端口监听F盘的一个文件，这时候就产生了冲突，ERROR！，使用命令行：netstat -aon|findstr "80"查看端口占用情况，找到pid后，再输入tasklist|findstr "4"，可查看这个pid被程序使用的情况，我最后是把监听的网站去电脑—服务里删除了，才有用，下下面的图片是成功情况下的图片：

在浏览器地址栏里输入localhost：8080：看到下面这个就大功告成了！！！