单文件组件与Vue中的路由
打开Vue默认项目夹，然后进入到main.js里面，它是整个项目的入口文件
el表示挂载到id等于app的元素上
然后再点开index.html文件当中
这个Vue就是挂载到这个div上
components: { App } 等于 components: { App ：APP }，就是定义一个局部组件的使用，这是一种es6的写法，当你键和值一样的时候，写一个就可以了，App其实就是一个定义好的局部组件
template: '<App/>' 把App这个局部组件显示到页面上
那么，这个APP局部组件在哪呢，
从当前目录中的App中查找
虽然写的是App但是Vue会自动去找没有App.vue或者App.js之类的
打开App.vue
一共有三个部分，分别为template，script，style
Vue当中，当以vue为后缀名的文件，我们叫做单文件组件，里面实际放的就是一个Vue的组件
组件的模板放在template里面，组件的逻辑放在script里面，组件的css放在style里面
我们先来运行一下这个Vue项目
我们就可以通过localhost:8080访问了
我们把App.vue里面删除一点东西
然后再去页面上看，发现变成这样了
说明App.vue里面确实是我们想要显示的内容
但是这些文字是怎么回事呢？
这其实就是路由在作用
路由就是根据网址的不同，返回不同的内容给用户
比如：用户访问：，返回一个主页面，
放用户访问，返回一个列表页面
如果我们把路由注释掉
发现页面上就只有这个logo了
说明当前路由的地址就是http://localhost:8080/#/，那么对应的内容存储到哪里了呢？
那么我现在就想主页显示一个home字符串：
再添加一个list路由