-
2020-01-01 00:00
- 75
- 0
开发背景：
假设有一个 h5 app 项目，前后端完全分离，前后端通过 json 进行数据交流，前端使用 vue 进行数据渲染开发。
问题/需求
目前 ui 已经把整个项目的界面都制作完毕，有 30+ 张页面。前端开发中每个 html 页面不可避免的存在公共部分，一般会是如下公共部分：
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='....'>
<!-- 这个地方根据不同的页面也许会有新增的 meta文件！！ -->
<!-- ...meta... ---->
<link rel='stylesheet' href='public/css/base.css' />
<link rel='stylesheet' href='public/css/module.css' />
<!-- 这个地方根据不同的页面也许会有新增的 css 文件！！ -->
<!-- ...link... ---->
<script src='plugins/Loading/loading.js'></script>
<script src='public/lib/jquery.js'></script>
<!-- 这个地方根据不同的页面也许会有新增的 js文件！！ -->
<!-- ...script... ---->
<!-- 这个地方根据不同的要买呢标题内容不一致！ --->
<title>标题</title>
</head>
<body>
<!-- 用户自定义内容 -->
<!-- 请任意添加... -->
<script src='public/js/public.js'></script>
<!-- 这个地方根据不同的页面也许会有新增的 js文件！！ -->
<!-- ...script... ---->
</body>
</html>怎么把如上公共部分：<head>....</head> 等这些每个页面都会加载的公共部分通过 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 中新增内容就轻松实现了所有页面增加公共部分的需求！！
实际我就是打算在纯前端的情况下实现类似后端模板引擎的功能！！请问该如何实现？？
0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部