如何使用Vue.js实现模板继承与局部模板复用功能

Vue本身的组件+插槽机制完全可以覆盖你要的模板继承、局部模板复用能力，不需要复制粘贴公共模块代码，根据你现有纯静态项目的情况，可以选两种落地方式：

零构建直接适配现有纯静态项目 #

如果你不想改动现有项目的纯静态结构，不想配打包工具，写好的HTML文件直接扔静态服务器就能跑，直接引入Vue即可，逻辑非常简单：

• 第一步：抽离公共基础布局
  把所有页面共用的header、footer、全局导航、公共统计代码等内容统一封装成BaseLayout组件，中间预留内容填充位，整个组件只需要写一次：

// /js/BaseLayout.js
const BaseLayout = {
  template: `
    <div class="app-wrapper">
      <!-- 公共页头，全站点共用，后续修改只需要改这一处 -->
      <header class="site-header">
        <div class="logo">我的作品集</div>
        <nav class="main-nav">
          <a href="/index.html">首页</a>
          <a href="/projects.html">作品展示</a>
          <a href="/about.html">关于我</a>
        </nav>
      </header>

      <!-- 核心内容填充位，对应你示例里的content块 -->
      <main class="page-container">
        <slot></slot>
      </main>

      <!-- 公共页脚，全站点共用 -->
      <footer class="site-footer">
        <p>© 2024 个人作品集 · All Rights Reserved</p>
      </footer>
    </div>
  `
}

• 第二步：每个页面直接套用基础布局
  不需要再复制粘贴header、footer代码，每个页面只需要写自己独有的内容，套在BaseLayout标签里即可，以首页为例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>首页 - 我的作品集</title>
  <link rel="stylesheet" href="/css/common.css">
  <!-- 引入Vue生产版脚本即可，无需本地安装依赖、配置打包环境 -->
  <script></script>
</head>
<body>
  <div id="app">
    <base-layout>
      <!-- 以下为当前页面独有的内容，自动填充到基础模板的content位置 -->
      <h1>你好，我是前端开发者XXX</h1>
      <p>欢迎来到我的个人作品集站点，这里会持续更新我做过的项目、技术文章。</p>
      <div class="project-preview">
        <!-- 页面专属内容 -->
      </div>
    </base-layout>
  </div>

  <script src="/js/BaseLayout.js"></script>
  <script>
    const { createApp } = Vue
    createApp({
      components: { BaseLayout }
    }).mount('#app')
  </script>
</body>
</html>

除了基础布局复用，你还可以把公共的作品卡片、分页组件、联系表单这些重复出现的模块抽成独立的小组件，也就是你提到的partial局部模板，哪个页面需要直接引入插入即可，还能传入参数定制不同场景下的展示内容。

轻量构建实现更贴近原生模板的写法 #

如果你的站点后续会加更多交互、页面数量较多，可以用Vite做极轻量的构建，最终输出的还是纯静态HTML/CSS/JS文件，不影响部署，这种方式下的写法和你示例里的模板继承语法几乎完全一致：

1. 先把公共基础布局写到layouts/BaseLayout.vue单文件组件里，和前面零构建版本的模板内容一致
2. 每个页面只需要引入基础布局，把页面内容放到布局标签内部即可：

<!-- 等价于 {% extends "base.html" %} -->
<template>
  <BaseLayout>
    <!-- 等价于 {% block content %} 包裹的页面专属内容 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et elementum ex. Etiam fermentum lacus non convallis ultrices.</p>
  </BaseLayout>
</template>

<script setup>
import BaseLayout from '@/layouts/BaseLayout.vue'
</script>

这种方式还支持命名插槽，你可以在基础布局里预留多个可填充块，比如页头侧边的扩展位、页脚上方的推荐位，不同页面按需填充即可，灵活度比传统后端模板的单块继承更高。

两种方案的对应关系和你预期的模板能力完全匹配：基础布局组件对应base.html母版，插槽机制对应block内容块定义，可复用小组件对应partial局部模板，后续修改公共模块只需要改一次，所有页面自动同步，完全不需要手动逐页复制粘贴维护。

内容的提问来源于stack exchange，提问作者NewbieInFlask