一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第一天，点击查看活动详情。
因为博主是新手，所以在使用Vue写项目的过程中通常会遇到这样一个问题，相信有的人也会有这样的问题，那就是项目组件该如何拆分。下图的构造相信很多人都会拆分。就是
- 页头：header.vue
- 页尾：footer.vue（不是必要的）
- 导航栏：side.vue
- 内容：content.vue（仅为举例，可设多个进行路由跳转）
但很多时候页面的布局方式不是固定的，很可能是这样的。
那么这个时候我们该怎么拆分组件呢？一个常用的技巧是单一职责原则，即一个组件理想情况下只处理一件事。如果你在编写代码的时候意识到一个组件持续膨胀，就应该将其拆分为多个更小的组件。就像下面这个网页，其实可以这样拆分。
我们从上往下看其实可以看到有一个标题的页头，这个可以分为一个组件。
下面是一个导航栏和图片框分别一个组件。但下面的三个想必大家都可以看出来结构很相似。大体上是：
- 图片标题+按钮
- 内容（图片或文字或按钮）
所以我们就可以这样拆分
我们可以发现栏目的标题交互以及样式都比较一致，就可以只分一个组件进行复用。而内容若都是文字可以之分一个，若带图片可以再分一个这样。
总之，就是一个项目在初期设计的时候一定要比较严谨地进行拆分，这样能够避免写大量重复的代码，清晰地拆分和组件的复用也可以让结构更加清晰，工作量也相应减少！
