vue的单文件组件的基本构成是这样的：
<template>
<div>
结构： （注意：template里只能有一层div，不能出现两个并列的div ）
</div>
</template>
// 逻辑
<script>
export default {
name: ‘组件名‘
}
</script>
// css样式
<style lang="">
</style>
项目打包完成后，可以看到main.js里有这样的一段：
new Vue({ el: ‘#app‘, router, store, components: { App }, template: ‘<App/>‘ })
也就是说，项目的根实例为 <div id="app"></div>
再看App.vue文件：
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: ‘App‘
}
</script>
<style>
</style>
这里的router-view显示的是当前路由的地址所对应的内容
如果去掉router-view，页面就是空白的
那，路由（router）是什么？
字面意思是，根据网址的不同，返回不同的内容给用户，例如，访问根路径‘/’,就访问主页，访问‘/list’，那就访问列表页
export default new Router({ routes: [{
// 当用户访问根路径‘/’的时候，展现给用户的是Home这个组件 path: ‘/‘, name: ‘Home‘, component: Home }, {
// 当用户访问根路径‘/city’的时候，展现给用户的是City这个组件
path: ‘/city‘,
name: ‘City‘,
component: City }]
啊~刚开始还觉得有点乱，我总感觉自己说不明白……
vue小项目总结与笔记【二】——vue的单文件组件模板和路由
原文：https://www.cnblogs.com/Ashe94/p/10552302.html