开发背景：

假设有一个 h5 app 项目，前后端完全分离，前后端通过 json 进行数据交流，前端使用 vue 进行数据渲染开发。

问题/需求

目前 ui 已经把整个项目的界面都制作完毕，有 30+ 张页面。前端开发中每个 html 页面不可避免的存在公共部分，一般会是如下公共部分：

标题

怎么把如上公共部分：

.... 等这些每个页面都会加载的公共部分通过 vue 的方式独立出来，然后在每个页面加载这些公共部分？？这解决的问题是避免碰到如果需要向所有页面公共部分增加一些代码时蛋疼的逐个页面进行改动 ......

以上我可能没有很好的表述清楚我的需求，类比一些 PHP Laravel 框架的 blade 模板：

定义一个顶级页面(top.blade.php)，定义一个应用级通用页面(public.blade.php)，在根据每个控制器/方法定义一个具体页面(index.blade.php)。

继承：index.blade.php 继承 public.blade.php，public.blade.php 继承 top.blade.php。

通过这种方式，如果公共部分新增文件，那么仅需要在 public.blade.php or top.blade.php 中新增内容就轻松实现了所有页面增加公共部分的需求！！

实际我就是打算在纯前端的情况下实现类似后端模板引擎的功能！！请问该如何实现？？