鍍金池/ 問答/PHP  HTML/ vue 如何實(shí)現(xiàn) html 公共部分？？

vue 如何實(shí)現(xiàn) html 公共部分？？

開發(fā)背景：

假設(shè)有一個(gè) h5 app 項(xiàng)目，前后端完全分離，前后端通過 json 進(jìn)行數(shù)據(jù)交流，前端使用 vue 進(jìn)行數(shù)據(jù)渲染開發(fā)。

問題/需求

目前 ui 已經(jīng)把整個(gè)項(xiàng)目的界面都制作完畢，有 30+ 張頁面。前端開發(fā)中每個(gè) html 頁面不可避免的存在公共部分，一般會(huì)是如下公共部分：

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='....'>
        <!-- 這個(gè)地方根據(jù)不同的頁面也許會(huì)有新增的 meta文件??！ -->
        <!-- ...meta... ---->
        <link rel='stylesheet' href='public/css/base.css' />
        <link rel='stylesheet' href='public/css/module.css' />
        <!-- 這個(gè)地方根據(jù)不同的頁面也許會(huì)有新增的 css 文件！！ -->
        <!-- ...link... ---->
        <script src='plugins/Loading/loading.js'></script>
        <script src='public/lib/jquery.js'></script>
        <!-- 這個(gè)地方根據(jù)不同的頁面也許會(huì)有新增的 js文件！！ -->
        <!-- ...script... ---->
        <!-- 這個(gè)地方根據(jù)不同的要買呢標(biāo)題內(nèi)容不一致！ --->
        <title>標(biāo)題</title>
    </head>
    <body>
    
        <!-- 用戶自定義內(nèi)容 -->
        <!-- 請(qǐng)任意添加... -->
        
        <script src='public/js/public.js'></script>
        <!-- 這個(gè)地方根據(jù)不同的頁面也許會(huì)有新增的 js文件?。?-->
        <!-- ...script... ---->
    </body>
</html>

怎么把如上公共部分：<head>....</head> 等這些每個(gè)頁面都會(huì)加載的公共部分通過 vue 的方式獨(dú)立出來，然后在每個(gè)頁面加載這些公共部分？？這解決的問題是避免碰到如果需要向所有頁面公共部分增加一些代碼時(shí)蛋疼的逐個(gè)頁面進(jìn)行改動(dòng) ......

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

定義一個(gè)頂級(jí)頁面（top.blade.php），定義一個(gè)應(yīng)用級(jí)通用頁面（public.blade.php），在根據(jù)每個(gè)控制器/方法定義一個(gè)具體頁面（index.blade.php）。

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

通過這種方式，如果公共部分新增文件，那么僅需要在 public.blade.php or top.blade.php 中新增內(nèi)容就輕松實(shí)現(xiàn)了所有頁面增加公共部分的需求??！

實(shí)際我就是打算在純前端的情況下實(shí)現(xiàn)類似后端模板引擎的功能！！請(qǐng)問該如何實(shí)現(xiàn)？？

回答
編輯回答
乞許

vue的核心之一就是組件化開發(fā)，你把這些公共的部分抽象成vue組件，或者直接在vue-cli項(xiàng)目的入口index.html中添加你需要的公共部分就ok了。

2018年3月30日 21:47
編輯回答
抱緊我

使用組件，將公共部分單獨(dú)封裝成vue頁面，再在需要用的頁面import進(jìn)來，使用標(biāo)簽放到合適位置

2017年1月14日 07:32
編輯回答
糖豆豆

像<head>....</head>這種直接寫在vue里的index.html就行了，如果是底部導(dǎo)航欄公共部分這種就看vue官網(wǎng)注冊(cè)組件就行

2018年4月5日 04:26
編輯回答
喜歡你

內(nèi)容挺多，我理解這里的問題就是

每個(gè)頁面加載這些公共部分

你的代碼跟vue沒關(guān)系吧。一個(gè)公共的組件就可以了，spa框架實(shí)現(xiàn)這種問題不要太簡單了。

2018年9月20日 22:36
編輯回答
舊螢火

可以通過插槽來實(shí)現(xiàn)
https://cn.vuejs.org/v2/guide...

2017年2月8日 06:06
編輯回答
毀了心

我不知道我是否理解錯(cuò)誤了。

1） 如果是單頁應(yīng)用的話，頭尾這樣的部分只需要在入口HTML中寫一次就好了

2） 如果是多個(gè)頁面并且每個(gè)頁面的主體內(nèi)容是通過vue去渲染，html中只是框架結(jié)構(gòu)的話。那么我個(gè)人覺得你可以使

用 pug, pug 支持模板繼承，自定義標(biāo)簽。這樣30+的頁面頭部，頁腳和相同的部分都使用一套模板，修改起來也快

速。

pug文檔(原jade)

2018年8月11日 21:14
編輯回答
離人歸

看情況你是vue做的多頁面應(yīng)用對(duì)吧？也沒用到前端路由，如果不使用后端模板引擎或者構(gòu)建工具的話，估計(jì)只能使用純前端模板了，試試這個(gè)art-template

2018年2月17日 01:23
編輯回答
萌二代

都用到vue了，它自帶這個(gè)功能。
了解一下vue的組件：
https://cn.vuejs.org/v2/guide...

2018年1月23日 05:20
編輯回答
墻頭草
<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>
2017年8月26日 13:35