Vue
Gracias a Webpacker y Potassium es muy fácil empezar a usar Vue junto con un proyecto nuevo de Rails.
1
> potassium create PROYECTO_DE_RAILS
2
[...]
3
Which front-end framework are you going to use?:
4
‣ Vue
5
Angular
6
None
Copied!
En el caso que tengas que agregar Vue a un proyecto Rails 5 que ya fue inicializado, puedes usar webpacker para configurarlo:
1
bundle exec rails webpacker:install:vue
Copied!
En Rails 5.2+ hay que configurar el ambiente de desarrollo con lo siguiente:
config/initializers/content_security_policy.rb
1
Rails.application.config.content_security_policy do |policy|
2
if Rails.env.development?
3
policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035'
4
policy.script_src :self, :https, :unsafe_eval
5
else
6
policy.script_src :self, :https
7
end
8
end
Copied!
Una vez instalado, la estructura inicial del proyecto será la siguiente:
1
app/javascript:
2
├── packs:
3
│ └── application.js
4
└── app.vue
Copied!
1
views/layouts/application.html.erb
2
3
<%= javascript_pack_tag 'application' %>
4
<%= stylesheet_pack_tag 'application' %>
Copied!
Webpacker funciona con packs, siendo cada "pack" un bundle de código independiente generado por webpack. En este caso, agregando las tags de arriba la aplicación de Rails va a tener acceso al compilado de todo lo importado en application.js y el scss generado a partir de los archivos .vue.
En un proyecto más avanzado esta sería una estructura ejemplo:
1
app/javascript:
2
├── main
3
│ ├── api
4
│ │ └── form-api.js
5
│ ├── components:
6
│ │ ├── sidebar.vue
7
│ │ ├── main.vue
8
│ │ └── footer.vue
9
├── shop
10
│ ├── api
11
│ │ └── cart-api.js
12
│ ├── components:
13
│ │ ├── cart.vue
14
│ │ └── cart.spec.js
15
│ ├── store:
16
│ │ └── index.js
17
│ │ └── modules
18
│ │ ├── cart.js
19
│ │ └── cart.spec.js
20
└── packs:
21
├── main.js
22
└── shop.js
Copied!
1
views/layouts/application.html.erb
2
3
<%= javascript_pack_tag 'main' %>
4
<%= stylesheet_pack_tag 'main' %>
Copied!
1
views/layouts/shop.html.erb
2
3
<%= javascript_pack_tag 'shop' %>
4
<%= stylesheet_pack_tag 'shop' %>
Copied!
Última actualización 15h ago
Copiar enlace