讲一下Vue中的页面是如何被显示出来的
打开src目录下的main.js文件，这是整个项目的入口文件。在这里定义了Vue 的根实例。
如图所示，根实例中有el，router，components，template四项内容，el代表把这个根实例被挂载到id=app的这个元素上，router代表路由，components和template分别对应组件和模板。
这些都代表什么意思呢？首先页面运行加载的是根实例，在根实例里注册了App这个组件，而这个根实例又被挂载到index.html中id=app的这个元素上，即根实例把App.vue组件中的内容显示在index.html文件中id=div的元素上，这个时候只要知道App.vue中的内容是什么，便可知道首页加载出来是什么内容（简单点说，Vue实例相当于是一个中转站，这个中转站把已经写好的vue组件挂载到对应的元素上，即把vue组件中的内容显示在对应的元素上）。
接下来再来打开App.vue这个组件（App.vue是整个应用的根组件），如下图所示：
在这个组件中，貌似也没有看到和运行页面对应的内容，那真正的内容到底在哪里呢？玄机就在这个<router-view/>标签，这个标签意思是显示当前路由地址所对应的内容，根据这个我们再去看路由的配置项，即router下的index.js文件，这个文件最终导出去的内容就是路由的配置项，打开index.js文件，如下图：
当用户访问根路径时，展示给用户的就是HelloWorld组件中的内容，这时我们再打开HelloWorld.vue这个组件，就会发现和运行出来的首页内容能对的上了。
总的来讲，就是根实例中有根组件，而根组件根据路由的配置来显示不同路由下所对应的不同组件中的内容，即呈现在运行出来的页面上。
一些补充：
1.单文件组件由三部分内容组成：template、script、style，分别对应模板、逻辑和样式。
2.路由可以理解为：根据网址的不同，返回不同的内容给用户。
