は最近、私はVue.jsのsingle file componentsと恋に落ちたんです。これは、互いに近接して、コンポーネントのテンプレートとスタイルを持っているので、非常に良くだ、と私はそれがページの一部をcomponentiseし、複数の場所でそれを使用するように簡単だということになりましたたくさんの少数のバグを書く見つけることです。Vue.jsテンプレートを静的HTMLファイルとCSSファイルにコンパイルすることはできますか?
ノーVueの関与と、静的なHTMLページを生成するには、この単一ファイルのコンポーネント構造を拡張することができれば、私は思ったんだけど。
たとえば、ヘッダー、セクション、およびフッターを含むメインの「content」divを持つページを作成したいとします。 Vue.jsを使用して、私は「ヘッダ」、「セクション」、および「フッター」のコンポーネントを作成し、それらをページのロード後にインスタンス持つようにJavaScriptを使用することができます。ページの各部分は、独自のコンポーネントであるので、そこにCSSの見込みは別の影響を与える一つの成分でいない、と私は編集するファイルの非常にクリーンツリーを持っています。私はv-model
またはv-bind
またはv-on
を使用していない、それが出てくれページの別々の部分をすることができますので、私はちょうどVue.jsを使用しています:
しかし、これは、これらのコンポーネントが実際にインタラクティブではないとして、少し無駄なようです。また、JavaScriptが無効になっていると私のページは全く機能しません。なぜなら、メイン要素divを保存するすべての要素は、利用可能なVueに依存しているからです。
だから私はないVue.jsを使用して、実行時にこれらのコンポーネントをロードするページへのが、任意のJavaScriptをせずにレンダリングする別のHTMLとCSSファイルに、.vueファイルをコンパイルすることができます任意の方法はありますか?
理想的には、私は、コンポーネントのgreeting.vue "があるだろう:ページ内で使用し
<template>
<p class="greeting">Hello!</p>
</template>
<style scoped>
.greeting { color: red; }
</style>
:
<html>
<body>
<greeting></greeting>
</body>
</html>
そして、これら2つのファイルにコンパイルします:付きHTMLページをテンプレートのコンパイルとプリレンダリング、およびすべてのコンポーネントのスタイルを含むCSSファイルが含まれています。私は、ページに生成されたスタイルシートを含めることができ、すべてのコンポーネントはスタイリングされます。
私はvue-loaderとvueifyを見ましたが、WebpackやBrowserifyを十分に使用していないので、何をしているのか分かりません。
私がしようとしていることは可能ですか?
これは私が使い終わったものです。 –