2017-03-17 27 views
8

は最近、私は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-loadervueifyを見ましたが、WebpackやBrowserifyを十分に使用していないので、何をしているのか分かりません。

私がしようとしていることは可能ですか?

答えて

3

あなたが探しているのは、サーバーサイドレンダリングです。 Nuxt.jsを見てみることをお勧めします。

From VueJS docs:

適切に生産対応 サーバーレンダリングアプリのすべての議論の側面を構成することは困難な作業となることができます。幸いなことに、このすべてをより簡単にすることを目指す優れたコミュニティプロジェクト があります。 Nuxt.js Nuxt.jsは、Vue エコシステムの上に構築された高レベルのフレームワークで、ユニバーサルVueアプリケーションを作成するための非常に合理的な開発 エクスペリエンスを提供します。さらに良い方法は、 をスタティックサイトジェネレータとして使用することもできます(ページは の単一ファイルのVueコンポーネント)。試してみることを強くお勧めします。

startedを入手するのは簡単です。あなたがvue-cliを使用する場合:

$ vue init nuxt/starter <project-name> 

それはあなたが通常(Vuex、ルータ、..)を必要とするすべてが付属しています。あなたが従わなければならないいくつかのフォルダ構造を強制することを覚えておいてください。

Hereは、スターターに含まれるコマンドのリストです。それ

は、アプリケーションをビルドし、(静的ホスティング 使用)HTMLファイルなど、すべてのルートを生成するよう

"scripts": { 
    "dev": "nuxt", 
    "build": "nuxt build", 
    "start": "nuxt start", 
    "generate": "nuxt generate" 
} 

あなたはおそらく、ほとんど、generateにiterestedされます。

また、このプロジェクトは(これを書いている時点で)under active developmentであるようですが、私たちはもっと素晴らしい機能を楽しみにしています!

+0

これは私が使い終わったものです。 –

1

私はVueが仮想DOMを使用して、それがHTMLではなく、データが更新されたときに効率的にDOMにパッチを適用する必要があるのJavaScript render functionsにテンプレートをコンパイルしていないので、あなたがこれを行うことはできませんと言うでしょう。

nodeの魔法を使ってファイルを解析して出力することは可能でしょうが、それは最小限の効果しか得られない大きな仕事です。

+0

ええ、私は、Vue.js自体がこれを行うためのツールではないと考えました。単一のファイルコンポーネントしかVueに置かれていないことがわかりました。それが私の参考点です。 –

2

公式vuejsガイドから:

あなたはWebPACKのを使用している場合は、簡単prerender-spa-pluginで事前レンダリングを追加することができます。これはVueアプリで広範にテストされています。実際、Vueコアチームのメンバーです。

関連する問題