问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue 如何实现 html 公共部分？？

头像
灰色v碰触
    2.9k30225281

    开发背景：

    假设有一个 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 中新增内容就轻松实现了所有页面增加公共部分的需求！！

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

    javascriptvue.jsphp
    阅读 11.4k
    10 个回答
    得票最新
    头像
    改名字很伤神
      7.9k3929

      内容挺多，我理解这里的问题就是

      每个页面加载这些公共部分

      你的代码跟vue没关系吧。一个公共的组件就可以了，spa框架实现这种问题不要太简单了。

      头像
      漫步人生路
        1165

        vue的核心之一就是组件化开发，你把这些公共的部分抽象成vue组件，或者直接在vue-cli项目的入口index.html中添加你需要的公共部分就ok了。

        头像
        javascriptuser
          1.6k33555

          我不知道我是否理解错误了。

          1） 如果是单页应用的话，头尾这样的部分只需要在入口HTML中写一次就好了

          2） 如果是多个页面并且每个页面的主体内容是通过vue去渲染，html中只是框架结构的话。那么我个人觉得你可以使

          用 pug, pug 支持模板继承，自定义标签。这样30+的页面头部，页脚和相同的部分都使用一套模板，修改起来也快

          速。

          pug文档(原jade)

          头像
          高启鑫
            123

            使用组件，将公共部分单独封装成vue页面，再在需要用的页面import进来，使用标签放到合适位置

            头像
            lion
              76032846
              头像
              Andrea
                1.4k41019

                看情况你是vue做的多页面应用对吧？也没用到前端路由，如果不使用后端模板引擎或者构建工具的话，估计只能使用纯前端模板了，试试这个art-template

                头像
                哈希
                  74463050

                  像<head>....</head>这种直接写在vue里的index.html就行了，如果是底部导航栏公共部分这种就看vue官网注册组件就行

                  头像
                  冯恒智
                    7.9k2428
                    头像
                    Rossy1
                      2.1k1066119
                      <template>
  <div id="apps">
    <div class="top">公共部分</div>
    <div class="leftNav">
      <router-link to="/HelloWorld">链接一</router-link>
      <router-link to="/second">链接二</router-link>
    </div>
    <div class="rightCon">
      <router-view/>
    </div>
  </div>
</template>
                      撰写回答
                      你尚未登录，登录后可以
                      • 和开发者交流问题的细节
                      • 关注并接收问题和回答的更新提醒
                      • 参与内容的编辑和改进，让解决方法与时俱进
                      推荐问题