Vue.js 的模板或部分继承

Question

我正在为我的投资组合制作一个只有 HTML+CSS+JS 的客户端网站，我一直在将我的页眉和页脚复制粘贴到几乎所有不同的网址中。

我想知道是否有办法避免使用部分或模板（如在 Rails 或 Flask 中使用）但使用 Vue.js 。

我的意思是，我希望我的 HTML 文件看起来像这样：

{% extends "base.html" %}

{% block content %}
<!--My HTML code for this file.html-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et elementum ex. Etiam fermentum lacus non convallis ultrices.</p>
{% endblock %}

Answer 1

我使用 Vue.js 组件解决了https://vuejs.org/guide/essentials/component-basics.html

 //Header.js export default { data() { return {} }, template: ` <header> <p>This is a header</p> </header>` }

 <!-- Any .html file --> <body> <script src="https://unpkg.com/vue@3"></script> <script type="module"> import Header from '../static/vue/Header.js' const { createApp } = Vue createApp(Header).mount('#header') </script> <div id="header"></div> ... </body>