要使用Vue脚手架，先要明白Vue脚手架是什么，简单来说Vue脚手架就是一种用于快速生成Vue项目基础架构,简化程序员创建Vue项目的框架。
1.创建脚手架工程
1.1 安装Vue脚手架
首先使用控制台在全局安装Vue yarn global @vue-cli，安装完成后可以用vue -V来查询安装版本，然后再使用vue create test来创建一个工作文件夹，（你也可以不用test，这里我们只是示例。）当终端执行完毕vue create test 指令后，会出现选项，我们按照以下方法来选择
1.选择Manaliy select features来手动选择要加载的模块
2.选择Choose Vue version,Babel,Router,尽量不要选择Linter
3版本选择2x
4.历史路由选择N
5.选择In dedicated config files
6.选择Y
7.根据终端提示输入CD 文件名切换到当前文件夹路径然后运行npm run serve来启动服务器
1.2 test文件夹文件概述
- 1.node_modules：放的是第三方的包，数量很多
- 2.public：放的是浏览器运行的网页文件
- 3.src：主要工作区文件，其中assets文件夹存储工作需要的静态文件如图片等，components是组件目录。router是路由用来渲染到页面的文件，views主要存储路由页面文件，最后的APP.vue是vue根组件入口，main是webpack打包入口。
- 4.test文件夹下其他文件：直接处于test根目录的不在文件夹里的文件基本都是配置文件，没事不要乱动哦
1.3 清理脚手架里默认的自带页面
脚手架安装完成后需要我们将Vue本身自带的欢迎页面清理一下，这样我们才能开始写自己的代码。其中：
- 1.public中有一个ico后缀的图标文件可以删除
- 2.src中，assets文件夹中图片文件可以删除，component文件夹中的HelloWorld文件可以删除，views文件夹中所有文件都可以删除。
- 3.清除文件后，再进入router文件夹的index.js文件中清除预设的路由规则和无用引入代码
- 4.清除APP.vue文件中默认模版和默认样式
此时观察8000端口运行的浏览器，浏览器页面已经变成空白，如果没有报错出现说明已经清理完毕，可以进行路由项目编辑了。
2.脚手架文件注意点
脚手架搭建完成后，观察index.js、App.vue、main.js三个文件的关系。先来看main.js文件，这是webpack的打包文件，所以肯定是要将所有数据都引入进来，
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({ router, render: h => h(App)}).$mount('#app')
所以第一行引入了vue组件，第二行引入App.vue，第三行引入router（路径是‘/router’文件夹，没有写index.js，这样写程序会自动寻找router文件夹下的index.js文件）。
第四行new了一个vue的实例对象，并将App引入，这样main和App就产生了关联
再看index.js文件的代码：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [ ]const
router = new VueRouter({ routes})
export default router
最后一行可以看出index.js导出了router，而main.js引入了router，所以index和main也产生了关联，并且在main的Vue实例中，让router渲染在APP文件的#app区域中，这样就实现了三个文件的互相关联。
