vueport
v0.1.5
Componentes de arquivo único e SSR para trilhos com vue js e webpack
Se eu fosse construir essa jóia novamente, provavelmente usaria algo como Mini_Racer para renderizar os componentes do VUE no mesmo servidor, em vez de introduzir uma solicitação HTTP e uma sobrecarga infravermelha. Se alguém ainda usa essa jóia e quiser fazer esse trabalho, ela deve ser relativamente direta, modificando a classe renderizadora.
O Vueport fornece ao seu aplicativo Rails uma abordagem moderna e componente para o desenvolvimento da interface do usuário usando o WebPack e o vue.js para ativar o arquivo único, componentes reativos renderizados no servidor e o cliente e a integração perfeita com as visualizações dos seus trilhos.
Dê uma olhada na documentação do vue.js sobre componentes de arquivo único para obter mais informações desse lado das coisas.
Vueport Piggybacks no WebPackRails Gem para configurar o WebPack com Rails, então verifique isso para obter mais informações.
Aqui.
Adicione esta linha ao GemFile do seu aplicativo:
gem 'vueport'E depois execute:
$ bundle
Ou instale você mesmo como:
$ gem install vueport
Então apenas corra
rails generate vueport:installPara inicializar tudo o que você precisa para começar (isso instalará o WebPackRails e também tudo o que o Vueport precisa no topo).
Para executar seu aplicativo, execute
bundle exec foreman start -f Procfile.devPara inicializar o WebPack Dev Server e seu aplicativo Rails!
Certifique -se de executar npm run compile (ou yarn run compile ) como parte do seu processo de implantação para a produção. Isso compila a versão de produção do pacote do lado do seu cliente, além de compilar o pacote lateral do servidor para o nosso aplicativo JS Node.
Na produção, enviamos solicitações HTTP para um servidor NodeJS básico para renderizar nosso conteúdo. Para executar o aplicativo Rails e o Node Server simultaneamente, use Procfile .
Enrole seu aplicativo no auxiliar vueport , para renderizar seus componentes. Por exemplo, em seu application.html.erb :
< body >
<%= vueport do %>
<%= render partial : 'shared/nav' %>
<%= yield %>
<% end %>
</ body >Também pode aceitar um único argumento. Por exemplo:
< body >
<%= vueport yield %>
</ body >Adicione os ajudantes do WebPack Rails ao seu layout para incluir seu JavaScript e CSS (consulte o WebPackRails ReadMe para obter mais informações).
Certifique -se de colocar o JS EntryPoint após o ajudante Vueport!
Por exemplo:
< 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 >Fora da caixa, a Vueport espera que seus componentes vivam em aplicativos/componentes e compila ativos para o público/webpack . Para alterá -los, você precisará alterar a configuração do WebPack (em config/webpack.config.js e config/webpack.server.js ) e a configuração do aplicativo Vue Gem. Para fazer isso, em um inicializador:
Vueport . configure do | config |
config [ :server_port ] = 3001
endConfira a gema webpackrails para obter informações sobre sua configuração.
O que o Vueport fornece é efetivamente 3 aplicativos:
Eles foram configurados para que possam ser construídos para produção completamente separadamente para evitar dutos complicados - por exemplo, você pode executar esses 3 aplicativos usando o Docker completamente separadamente, o que significa que você não precisa de rubi e nó em um único dockerfile.
Para obter mais informações sobre como o Webpack foi integrado ao Rails, consulte esta seção do WebPack Rails ReadMe.
Para ativar a renderização do lado do servidor, criei um aplicativo NodeJS simples que usa o renderizador do servidor Vue para renderizar o conteúdo da página em cada solicitação. Para ativar a reidratação lateral do cliente, também anexamos o conteúdo original de visualização em um modelo para a instância do Vue do lado do cliente.
O SSR está ativado apenas na produção.
Minha experiência de trabalhar com muitas bibliotecas modernas da interface do usuário e particularmente a integrar os aplicativos Rails (especialmente reagir e vue js) me levaram à conclusão de que o vue js parece ser uma biblioteca mais explicada e 'as baterias incluía' ao criar compensações para os trilhos.
Eu uso reagem regularmente para spas e adoro sua filosofia funcional, mas para escrever componentes para se encaixar em um frontend da Rails, Vue parece me fornecer a menor complexidade e parece ser mais fácil para os desenvolvedores de rubi.
Para uma comparação colaborativa Vue.js e React, confira isso.
Recebo o erro Could not load compiled manifest from /app/public/webpack/manifest.json na produção
Você precisará executar npm run compile como parte do seu processo de construção para gerar o pacote JS de produção (este erro é gerado pelo WebPackRails)
Depois de verificar o repositório, execute bin/setup para instalar dependências. Em seguida, execute rake spec para executar os testes. Você também pode executar bin/console para um prompt interativo que permitirá experimentar.
Para instalar esta gema na sua máquina local, execute bundle exec rake install . Para lançar uma nova versão, atualize o número da versão no version.rb e, em seguida, execute bundle exec rake release , que criará uma tag git para a versão, push git cometa e tags e pressionará o arquivo .gem para rubygems.org.
Relatórios de bug e solicitações de puxar são bem -vindos no github em https://github.com/samtgarson/vueport. Este projeto deve ser um espaço seguro e acolhedor para a colaboração, e espera -se que os colaboradores sigam o Código de Conduta do Covenant colaborador.
A GEM está disponível como código aberto nos termos da licença do MIT.
