在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

開發(fā)背景：

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

問題/需求

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

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

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

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

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

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

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

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

回答
編輯回答
乞許

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

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

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

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

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

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

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

每個頁面加載這些公共部分

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

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

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

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

我不知道我是否理解錯誤了。

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

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

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

速。

pug文檔(原jade)

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

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

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

都用到vue了，它自帶這個功能。
了解一下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