十分钟搭建vue开发环境（新手教程）

想写关于vue的文章很久了，趁着这段实习的时间，顺便记录一下自己学习vue的过程
vue这个框架现在确实很火，大中小公司都在用
今天记录的就是新手利用十分钟搭建vue项目的开发环境，来运行github上面的开源项目
强烈推荐阅读vue官方文档

一、安装各种环境依赖（node.js、npm）
端开发框架和环境都是需要 Node.js
先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现:下载地址

安装完成之后，打开cmd开始输入命令。
（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。
下载好node之后，以管理员身份打开cmd管理工具，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。
输入npm -v也能查看当前npm包管理工具的版本号
然后执行npm install

二、安装vue-cli脚手架工具
脚手架，顾名思义，就是在你开发项目时提高效率的一个工具。vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。
vue-cli官方技术文档
全局安装vue-clinpm install -g @vue/cli
安装完成以后打开cmd命令行管理工具，输入vue -V(此处V为大写)回车，即可查看vue当前版本

三、创建第一个vue项目
我们新建一个名为new demo的文件夹来存放我们的第一个vue项目
然后打开vs code编辑器，打开我们的new demo文件，如图所示
vscode下载地址https://code.visualstudio.com/

打开我们的终端调试器，输入命令vue create project name(project name是你的项目名称)，按回车
本教程项目名称为work

default (babel, eslint) 即为默认设置
Manually select features 为自定义，我们直接选择第一个默认即可，按回车，等待安装

安装完成后如图所示

这时候我们还要再安装npm的依赖，我们去到我们项目的路径cd work
然后输入npm install,按回车

安装完成后，我们发现我们的项目文件夹已经有了一个新的结构了，说明安装成功

一切环境依赖安装准备就绪，我们来测试一下自己新建的vue项目的运行情况npm run serve
会弹出一个浏览器访问地址默认为http://localhost:8080。

然后我们浏览器输入http://localhost:8080/，就进去了我们项目的入口页面

说明我们的第一个利用vue-cli搭建的初始的项目完成了