先看下要了解的东西

1.开头了解

同过 main.js 可以看到，写的所有vue代码最终会加在 public/index.html 中的 id=“app” 的div标签内

2.代码流程

1.删除App.vue里面所有代码，粘贴新代码

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

ok，现在用户打开网页会先加载App.vue，此时你的URL是：/

App.vue中的router-view标签会去路由文件（router/index.js）寻找你的URL属于文件
这里是Home，所以会去找views/Home.vue
此时可以了解，用户进入网页就去加载了视图里面的Home.vue

3.进一步

打开 Home.vue 可以看到， Home.vue 里面本身没有任何网页内容
Home.vue里面引入了：叫 MoKuai 的子模块，网页内容都在子模块里面

由此：

正式：App.vue—router/index.js—views/Home.vue—components/MoKuai.vue
通俗：入口—路由–视图—子模块