页面拆分公共模板与组件化

• App.vue

首先我们要明白的是，页面是在 App.vue 开始启动的

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

上面的代码是 App.vue 的初始状态，需要注意的是 <template> 下还必须有一个父元素 <div> 包裹住页面的元素，然后页面中的所有元素都注入到这个 div 中；

其中的 <router-view/> 对应的是 routers 中不同的路由(模块)页面，切换到不同的路由，就把当前的路由页面 vue 结构替换 App.vue 中的 <router-view/>。

• 组件化

如果项目中存在相似的地方，例如页面的 header，不只在单个页面存在，而且大致相同，我们可以将其封装成组件。

那么该如何封装组件呢？我们可以在 components 文件夹里新建文件 组件.vue 并写好想要的结构样式等；

接下来就是如何去使用封装好的组件呢？我们只需要在使用的地方将其引入并加入 component 属性即可：

<template>
  <div id="app">
  <Header></Header>  // 使用组件
    <router-view/>
  </div>
</template>