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

• 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>

<script>
  import Header from '@/components/header'   // 将组件引入

export default {
  name: "App",   // 这里是 App.vue
  components: {
    Header       // 加入到 components 属性中
  }
}
</script>

这里需要注意的是：vue 本身存在 <header> 标签，所以如果是将组件直接命名为 header 应该会出错，所以这里使用了 <Header> 大写来区分。

项目中公用的样式和基础样式可以提取出来放到 assets 文件夹中，然后再在页面中引入：

<style lang="less">
@import url("./assets/common.less");
// 等价于
@import "./assets/common.less";  // 这里必须写上分号
</style>