vueport下載 - vueport源代碼下載

vueport

三方組件

v0.1.5

下載

Vueport

帶有VUE JS和WebPack的導軌的單個文件組件和SSR

配x這個寶石沒有積極維護！對於VUE運行SSR似乎仍然沒有一個很好的解決方案（例如React_on_rails為React提供）。

如果我要再次構建這個寶石，我可能會使用Mini_racer之類的東西在同一服務器上渲染VUE組件，而不是引入HTTP請求和Infra開銷。如果有人仍然使用此寶石並想完成這項工作，則可以通過修改渲染器類相對直接。

VuePort通過使用webpack和vue.js啟用了單個文件，在服務器上呈現的反應性組件和客戶端以及與您的導軌視圖無縫集成，為您的Rails應用提供了UI開發的現代化方法。

查看單個文件組件上的vue.js文檔，以獲取有關此方面的更多信息。

Vueport Piggybacks到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中。 html.erb：

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

它也可以接受一個參數。例如：

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

資產設置

將WebPack Rails的幫助者添加到您的佈局中，以包括您的JavaScript和CSS（有關更多信息，請參見WebPackrails Replme）。

確保將JS入口點放在Vueport助手之後！

例如：

 < 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期望您的組件居住在應用程序/組件中，並將資產彙編為Public/WebPack 。要更改這些，您需要更改WebPack Config（在Config/webpack.config.js和config/webpack.server.js中）和VUE GEM應用程序配置。為此，在初始化器中做：

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

查看WebPackrails GEM以獲取有關其配置的信息。

它如何工作？

Vueport為您提供的是有效的3個應用程序：

您的基本鐵路應用程序
用於服務器端渲染的節點應用程序（in /Renderer）
用於運行開發WebPack的節點應用程序

這些已設置為以便可以完全單獨構建以避免使用複雜的管道，例如，您可以完全單獨使用Docker運行這3個應用程序，這意味著您不需要單個Dockerfile中的Ruby和Node。

有關WebPack如何與Rails集成的更多信息，請查看WebPack Rails Readme的這一部分。

服務器端渲染（SSR）

為了啟用服務器端渲染，我創建了一個簡單的nodejs應用程序，該應用使用VUE服務器渲染器在每個請求上渲染頁面內容。為了啟用客戶端補液，我們還將原始視圖內容附加在模板中，以供客戶端VUE實例拾取。

SSR僅在生產中啟用。

為什麼要vue.js？

我與許多現代UI庫合作的經驗，以及將它們與Rails Apps（尤其是React和Vue JS）集成在一起的特定經驗，這使我得出這樣的結論，即Vue JS似乎是一個更具說明性，包括“電池”庫，當時是在構建Rails的組合時。

我定期使用SPA的反應並喜歡其功能性哲學，但是對於撰寫組件以適合鐵軌前端，Vue似乎為我提供了最不復雜的性能，並且對於Ruby開發人員來說，最容易理解。

有關vue.js和React協作比較，請檢查一下。

常見問題解答

我得到錯誤Could not load compiled manifest from /app/public/webpack/manifest.json生產中
您需要運行npm run compile作為構建過程的一部分，以生成生產JS捆綁包（此錯誤是由WebPackRails生成的）

做

處理SSR
使WebPack配置更像VUE CLI模板中的配置
優化與NodeJS的SSR相互作用
JS組件測試設置

發展

檢查回購後，運行bin/setup以安裝依賴關係。然後，運行rake spec以運行測試。您還可以運行bin/console以獲得交互提示，該提示可以讓您進行實驗。

要將此GEM安裝到本地計算機上，請運行bundle exec rake install 。要發布新版本，請在version.rb中更新版本號，然後運行bundle exec rake release Release ，該版本將為版本創建一個git標籤，推送git consits and tags，然後將.gem文件推到rubygems.org。