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 ，该版本将为版本创建一个git标签，推送git consits and tags，然后将.gem文件推到rubygems.org。