基于vue解析复杂页面——以简书前端为例

在实际写页面的时候，如果一个页面的结构比较复杂，那么我们着一个页面的前端代码的量就会很大，那么我们如何拆解一个页面呢？
下面我们以简书首页进行解析及使用

根据框起来的部分，我们可以分为以下几个模块

• 导航栏
• 轮播图
• 收藏话题
• 热门作者

• 文章
  目录结构图

  
  3.png

然后我们依次抽取出来创建组件

下面以Header为例使用组件
1.我们在Home.vue的Script中引入Header.vue

4.png

其中v-Head是自定义命名 仿照vue的命名方法
2.然后在template中引入

5.png

3.run dev 运行实现效果