脚手架是什么鬼东西？下面图的就是脚手架。不过它是盖房子的脚手架，我们用的是前端开发的脚手架，那看了这图也知道手脚架是什么鬼东西大概有啥用了吧？对，就是方便。
image.png
之前一开始在学习vue的时候一直用的script标签直接引入，基本上没啥大问题。后来差不多做一些项目的时候，都用到了webpack之类的自动化构建工具。一开始接触webpack这东西，这真的是从入门到弃门而走，一大堆不明bug，一天下来不是在百度就是在百度的路上~然后既然从0搭建这么浪费时间，那就直接用别人已经弄好的就ok了。
image.png
默认是已经装好了node环境，不知道怎么安装的话 可以去百度千度搜狗搜猫都行去找个教程安装哈~
首先，第一步，新建个项目文件夹shift+鼠标右键选择打开命令窗口
npm install -g vue-cli
然后安装好了之后新建个项目的目录
vue init webpack test
然后过一会会出现下面的这些命令：
image.png
Project name 这里可以输项目名称
Project description 这里可以输项目的描述
然后就一直回车
Install vue-router 这里问要不要安装路由
Use ESLint to lint your code 然后这里问要不要装ESList检测
然后就一直回车到最后ok了。
然后接下来去安装一下依赖 ，你可以退出手动进去刚刚的test文件夹里面再打开命令行，或者直接在命令行cd进去文件夹，我这里是直接命令行操作了
cd test
npm install
然后上面install这里最好还是用npm吧，虽然可能会等的时间久一丢丢，但是用cnpm的话有时候会漏些东西 ~
.......
.......
等待已久的时间过去之后，这里应该都安装好的了。这里是装好之后的文件夹
image.png
然后接下来直接在命令行输入npm run dev去跑一下。
npm run dev
image.png
默认是8080的端口（如果想修改的话可以在根目录下打开config/index.js文件，找到下面这一块改掉再重新run一下就好）
image.png
然后显示这里，就结束了~然后你就可以去为所欲为的写你的项目了
image.png
