Můžeš si zkusit, zda by ti pro rozčlenění vyhovovaly tzv.
JavaScript modules. K těm npm nepotřebuješ, ale web server ano (otevření z file systému pomocí file:// protokolu nefunguje).
Použití s Vue.js by pak vypadalo nějak takhle:
index.html<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<grocery-list v-bind:list="foodList"></grocery-list>
</div>
<script type="module">
import "./components/grocery-list.js";
let app = new Vue({
el: "#app",
data: {
foodList: [{ id: 0, text: "Vegetables" }, { id: 1, text: "Cheese" }]
}
});
</script>
components/grocery-list.jsimport "./grocery-item.js";
Vue.component("grocery-list", {
props: ["list"],
template: `
<ol>
<grocery-item v-for="item in list" v-bind:item="item" v-bind:key="item.id" />
</ol>
`
});
components/grocery-item.js (s ukázkou templaty oddělené do samostatného souboru)
Vue.component("grocery-item", async () => {
let templateResponse = await fetch(import.meta.url.replace(/\.js$/, ".html"));
let template = await templateResponse.text();
return {
props: ["item"],
template
};
});
components/grocery-item.html<li>{{ item.text }}</li>
V html si naimportuješ pouze ty komponenty, které v něm přímo použiješ, tranzitivní komponenty (grocery-item) se dotáhnou z těch přímých (viz import v grocery-list.js). A jestli chceš mít ty HTML šablony někde bokem, tak si je můžeš dotahovat tak, jak to dělá grocery-item.js. Pokud bys ty šablony chtěl mít přímo v .js souboru jako ne-string, např. JSX (nevím, jestli jsou Vue.js šablony kompatibilní s JSX), tak to by sis do stránky musel načíst něco jako babel, co by ti v podstatě provádělo transpilaci modulů (bývá to pořádný kusisko JS kódu).
96 Odpovědí
59285 Zhlédnutí