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>

Vue.js 的模板或部分繼承

問題描述

1 個解決方案

解決方案1
0 已采納 2022-07-10 18:34:36

Vue.js 的模板或部分繼承

問題描述

1 個解決方案

解決方案1 0 已采納 2022-07-10 18:34:36

解決方案1
0 已采納 2022-07-10 18:34:36