设计细节

容器的功能比较简单，主要将页面切分成头部header、侧边栏aside、主要区域main、底部footer，这几个部分都放在容器container里。

在没有侧边栏的时候，container里的排列方向是column，当有侧边栏时，container里的排列方向就切换成row：

<script>
export default {
  name: "YvContainer",
  data() {
    return {
      containerClass: {
        hasAside: false
      }
    }
  },
  mounted() {
    this.$children.some(child => {
      if (child.$options.name === 'YvAside') {
        this.containerClass.hasAside = true
        return true
      }
    })
  }
}
</script>

通过遍历判断是否存在aside组件，存在aside的时候将hasAside设置为true，同时给container加上了hasAside的类，样式为flex-direction: row

vuepress配置

在docs/.vuepress/components文件夹下增加container-demo的vue文件，内容就是我们要展示的container示例，然后在docs/components文件夹下增加container的md文件，内容就是放置整个container组件说明。