vueportダウンロードvueportソースコードのダウンロード

vueport

サードパーティ製コンポーネント

v0.1.5

ダウンロード

VuePort

Vue JSとWebpackを使用したレール用の単一ファイルコンポーネントとSSR

ショ和この宝石は積極的に維持されていません！ VUEのSSRを実行するための良い解決策はまだないようです（React_on_railsがReactを提供するなど）。

この宝石を再度構築する場合、HTTPリクエストとインフラオーバーヘッドを導入するのではなく、同じサーバー上のVueコンポーネントをレンダリングするためにMini_racerのようなものを使用するでしょう。誰かがまだこの宝石を使用していて、その仕事をしたい場合は、レンダラークラスを変更することで比較的簡単にする必要があります。

VuePortは、WebpackとVue.jsを使用して単一ファイル、サーバーとクライアントにレンダリングされたリアクティブコンポーネント、Railsビューとのシームレスな統合を有効にすることにより、RailsアプリにUI開発に対する最新のコンポーネントアプローチを提供します。

物事のその側の詳細については、単一のファイルコンポーネントのVue.jsドキュメントをご覧ください。

VuePortはWebPackrails Gemに豚を貯めて、Railsを使用してWebpackセットアップを取得してください。詳細については、確認してください。

レールアプリの例

ここ。

インストール

この行をアプリケーションのGemfileに追加します。

 gem 'vueport'

そして実行してください：

 $ bundle

または、自分でインストールします：

 $ gem install vueport

次に、実行します

rails generate vueport:install

開始するために必要なすべてをブートストラップするには（これにより、WebPackRailsと、VuePortが必要とするすべてのものをインストールします）。

アプリを実行するには、実行してください

bundle exec foreman start -f Procfile.dev

Webpack devサーバーとRailsアプリを起動します！

生産展開

展開プロセスの一部として、 npm run compile （またはyarn run compile ）を実行してください。これにより、クライアントサイドバンドルの生産バージョンがコンパイルされ、使用するノードJSアプリのサーバーサイドバンドルをコンパイルします。

生産では、HTTPリクエストを基本的なNodeJSサーバーに送信して、コンテンツをレンダリングします。 Railsアプリとノードサーバーを同時に実行するには、 Procfile使用します。

使用法

ヘルパーを表示します

コンポーネントをレンダリングするために、アプリケーションをvueportヘルパーにラップします。例： application.html.erb ：

 < body >
    <%= vueport do %>
        <%= render partial : 'shared/nav' %>
        <%= yield %>
    <% end %>
</ body >

また、単一の引数を受け入れることもできます。例えば：

 < body >
    <%= vueport yield %>
</ body >

資産のセットアップ

Webpack Railsヘルパーをレイアウトに追加して、JavaScriptとCSSを含めます（詳細については、WebPackrails Readmeを参照してください）。

VuePortヘルパーの後にJSエントリポイントを配置してください！

例えば：

 < head >
    <%= stylesheet_link_tag * webpack_asset_paths ( 'application' , extension :  'css' ) %>
</ head >
< body >
    <%= vueport do %>
        <%= render partial : 'shared/nav' %>
        <%= yield %>
    <% end %>

    <%= javascript_include_tag * webpack_asset_paths ( "application" , extension : 'js' ) %>
</ body >

デフォルトの構成

箱から出して、Vueportはコンポーネントがアプリ/コンポーネントに住むことを期待し、アセットをパブリック/ウェブパックにコンパイルします。これらを変更するには、webpack config（ config/webpack.config.jsおよびconfig/webpack.server.js ）とVue Gemアプリケーションconfigの両方を変更する必要があります。これを行うには、イニシャルイザーで：

 Vueport . configure do | config |
    config [ :server_port ] = 3001
end

その構成に関する情報については、WebPackRails GEMをご覧ください。

どのように機能しますか？

VuePortが提供するのは、効果的に3つのアプリケーションです。

ベースレールアプリ
生産におけるサーバー側のレンダリング用のノードアプリ（in /renderer）
開発中のWebパックを実行するためのノードアプリ

これらは、複雑なパイプラインを避けるために完全に個別に生産用に構築できるようにセットアップされています。たとえば、Dockerを完全に個別に使用してこれらの3つのアプリケーションを実行できます。

WebpackがRailsと統合された方法の詳細については、Webpack Rails Readmeのこのセクションをご覧ください。

サーバーサイドレンダリング（SSR）

サーバーサイドレンダリングを有効にするために、VUEサーバーレンダラーを使用して各リクエストでページのコンテンツをレンダリングする簡単なnodeJSアプリを作成しました。クライアントサイドの再水和を有効にするために、クライアントサイドVUEインスタンスのテンプレートに元のビューコンテンツを添付して、ピックアップします。

SSRは生産でのみ有効になります。

なぜvue.js？

多くの最新のUIライブラリを使用した私の経験、およびそれらをRailsアプリ（特にReactおよびVue JS）と統合することを特に導き、Vue JSはレール用のコンポーネントを構築する際にライブラリをより開かれており、「バッテリーを含む」ライブラリが含まれているようです。

私はスパのために定期的にReactを使用し、その機能哲学を愛していますが、レールのフロントエンドに収まるコンポーネントを作成するために、Vueは私に最も複雑ではないようであり、Ruby開発者が推論するのが最も簡単であるようです。

vue.jsおよびReact Collaborative比較については、これをチェックしてください。

FAQ

エラーCould not load compiled manifest from /app/public/webpack/manifest.jsonた
Buildプロセスの一部としてnpm run compile実行する必要がありますJSバンドルを生成する必要があります（このエラーはWebパックレールによって生成されます）

やる

SSRを処理します
vue CLIテンプレートの構成のようにWebpack構成をより多くする
nodejsとのSSR相互作用を最適化します
JSコンポーネントテストセットアップ

発達

リポジトリをチェックアウトした後、 bin/setupを実行して依存関係をインストールします。次に、 rake specを実行してテストを実行します。また、実験を可能にするインタラクティブなプロンプトのbin/consoleを実行することもできます。

この宝石をローカルマシンにインストールするには、 bundle exec rake install実行します。新しいバージョンをリリースするには、 version.rbのバージョン番号を更新してから、バージョンbundle exec rake release gitタグを作成し、gitコミットとタグをプッシュし、 .gemファイルをRubygems.orgにプッシュします。