vueport
v0.1.5
Componentes de un solo archivo y SSR para rieles con Vue JS y Webpack
Si volviera a construir esta gema, probablemente usaría algo como Mini_Racer para representar los componentes VUE en el mismo servidor, en lugar de introducir una solicitud HTTP y una sobrecarga de infra. Si alguien todavía usa esta gema y quiere hacer ese trabajo, debería ser relativamente sencillo modificando la clase de renderizador.
VuePort proporciona a su aplicación Rails un enfoque moderno y componente para el desarrollo de la interfaz de usuario mediante el uso de Webpack y Vue.js para habilitar un solo archivo, componentes reactivos representados en el servidor y el cliente y la integración perfecta con las vistas de sus rieles.
Eche un vistazo a la documentación Vue.js en componentes de un solo archivo para obtener más información sobre ese lado de las cosas.
VuePort Pidgybacks en la gema Webpackrails para obtener la configuración de Webpack con rieles, así que consulte eso para obtener más información.
Aquí.
Agregue esta línea al archivo gem de su aplicación:
gem 'vueport'Y luego ejecutar:
$ bundle
O instálelo usted mismo como:
$ gem install vueport
Entonces solo corre
rails generate vueport:installPara arrancar todo lo que necesita para comenzar (esto instalará Webpackrails y también todo lo que VuePort necesita en la parte superior).
Para ejecutar su aplicación, ejecute
bundle exec foreman start -f Procfile.dev¡Para iniciar el servidor de desarrollo web y su aplicación Rails!
Asegúrese de ejecutar npm run compile (o yarn run compile ) como parte de su proceso de implementación en la producción. Esto compila la versión de producción del paquete del lado del cliente, así como la compilación del paquete del lado del servidor para que nuestra aplicación Node JS use.
En la producción enviamos solicitudes HTTP a un servidor NodeJS básico para representar nuestro contenido. Para ejecutar la aplicación Rails y el servidor de nodo simultáneamente, use Procfile .
Envuelva su aplicación en el vueport Helper, para representar sus componentes. Por ejemplo, en su application.html.erb :
< body >
<%= vueport do %>
<%= render partial : 'shared/nav' %>
<%= yield %>
<% end %>
</ body >También puede aceptar un solo argumento. P.ej:
< body >
<%= vueport yield %>
</ body >Agregue los ayudantes de Webpack Rails a su diseño para incluir su JavaScript y CSS (consulte Webpackrails ReadMe para obtener más información).
¡Asegúrese de colocar el punto de entrada JS después del ayudante de VuePort!
P.ej:
< 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 >Fuera de la caja, VuePort espera que sus componentes vivan en la aplicación/componentes , y compile activos a público/webpack . Para cambiarlos, deberá cambiar el Webpack Config (en config/webpack.config.js y config/webpack.server.js ) y la configuración de la aplicación GEM Vue. Para hacer esto, en un inicializador do:
Vueport . configure do | config |
config [ :server_port ] = 3001
endConsulte la gema WebPackrails para obtener información sobre su configuración.
Lo que VuePort le brinda es efectivamente 3 aplicaciones:
Estos se han configurado para que puedan construirse para la producción por completo para evitar tuberías complicadas; por ejemplo, puede ejecutar estas 3 aplicaciones usando Docker por separado, lo que significa que no necesita Ruby and Node en un solo Dockerfile.
Para obtener más información sobre cómo Webpack se ha integrado con los rieles, consulte esta sección del ReadMe Webpack Rails.
Para habilitar la representación del lado del servidor, creé una aplicación NodeJS simple que utiliza el renderizador del servidor VUE para representar el contenido de la página en cada solicitud. Para habilitar la rehidratación del lado del cliente, también adjuntamos el contenido de la vista original en una plantilla para que la instancia del lado del cliente Vue la recoja.
La SSR solo está habilitada en la producción.
Mi experiencia de trabajar con muchas bibliotecas de IU modernas, y particularmente con la integración de aplicaciones de Rails (especialmente React y Vue JS), me ha llevado a la conclusión de que Vue JS parece ser una biblioteca más explícita y 'incluye' al construir componentes para rieles.
Utilizo React de forma regular para SPA y amo su filosofía funcional, pero para escribir componentes para que se ajusten a una frontend de Rails, Vue parece proporcionarme la menor complejidad y parece ser más fácil para los desarrolladores de Ruby para razonar.
Para una comparación colaborativa de Vue.js y React, consulte esto.
Entiendo el error Could not load compiled manifest from /app/public/webpack/manifest.json en producción
Deberá ejecutar npm run compile como parte de su proceso de compilación para generar el paquete JS de producción (este error es generado por WebPackrails)
Después de revisar el repositorio, ejecute bin/setup para instalar dependencias. Luego, ejecute rake spec para ejecutar las pruebas. También puede ejecutar bin/console para un mensaje interactivo que le permitirá experimentar.
Para instalar esta gema en su máquina local, ejecute bundle exec rake install . Para lanzar una nueva versión, actualice el número de versión en version.rb y luego ejecute bundle exec rake release , que creará una etiqueta GIT para la versión, Push Git Commits and Tags, y empuje el archivo .gem a rubygems.org.
Los informes de errores y las solicitudes de extracción son bienvenidas en GitHub en https://github.com/samtgarson/vuePort. Este proyecto está destinado a ser un espacio seguro y acogedor para la colaboración, y se espera que los contribuyentes se adhieran al Código de Conducta del Pacto de contribuyente.
La gema está disponible como código abierto bajo los términos de la licencia MIT.
