Comment faire fonctionner les rails avec vue.js?

Question

Eh bien ma question est simple, comment faire une application Ruby on Rails fonctionne avec Vue.js?

Les détails

Je regarde d'abord le joyau vue-rails, mais qui ajoutent Vue à la canalisation d'actifs des rails, et je veux travailler avec d'autres paquets de MNP, comme browserify. Ensuite, je regarde à cela, browserify-rails qui permettent commonjs dans le dossier js app/assets/javascript/. Aussi, je prévois de faire une application Vuejs pour chaque contrôleur rails, et l'accès aux actions backend avec le vue-resource et vue-router (si ce n'est pas une bonne approche s'il vous plaît faites le moi savoir), alors j'ai ajouté la ligne suivante à ma mise en page

<%= javascript_include_tag params[:controller] %> 

qui ajoutera un fichier js avec le nom du contrôleur, de sorte que le UsersController aura le fichier users.js avec la principale application de vue de ce contrôleur.

Ensuite, essayer ce que j'échafaudés un utilisateur ressource avec rails et font rendre format JSON dans chaque action, comme celui-ci

def index 
    @users = User.all 

    respond_to do |format| 
     format.html # index.html.erb 
     format.json { render json: @users } 
    end 
end 

qui fonctionne très bien. Ensuite, dans le dossier app/assets/javascript/ ajouter users.js avec le contenu suivant

var Vue = require('vue'); 
Vue.use(require('vue-resource')); 

new Vue({ 
    ready: function(){ 
     this.$http.get('users.json').then(function(response){ 
      console.log(JSON.stringify(response)); 
     }); 
    } 
}); 

Et quand je visite la console de développement en chrome, je vois que Vue est ajoutée, mais je ne vois pas de réponse, et j'avais déjà inséré un utilisateur. En passant, j'essaie avec l'URL https://vuejs-rails-yerkopalma.c9users.io/users (je développe en c9.io) et seul le fichier /users/index.html.erb est rendu. Alors, waht sont mes suppositions:

1. Je pourrais utiliserai vue-resource dans un mauvais sens, je veux dire l'URL passée à la fonction get().
2. Je pourrais manquer une configuration vue-resource.
3. Peut-être que je devrais juste utiliser la gemme vue-rails combinée avec brwoserify-rails mais je ne sais pas comment. Toute aide ou ligne directrice serait appréciée.

Voici mon fichier application.js (est également inclus dans mon dossier de mise en page)

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require jquery 
//= require jquery_ujs 
//= require bootstrap-sprockets 

Answer 1

J'ai réussi à faire ce travail avec Vue.js. J'ai d'abord ajouté une propriété el à l'objet passé au constructeur Vue, et j'ai commencé à recevoir une erreur disant que l'élément body n'était pas défini. Évidemment, l'élément body est toujours présent dans un fichier html, donc je pensais que c'était un problème à propos de quand les instances de Vue ont été créées. Donc j'ai simplement tout emballé sur un événement ready.

$(document).on('ready page:change', function() { 
    var Vue = require('vue'); 

    Vue.use(require('vue-resource'));  

    new Vue({ 
     el: 'body', 
     data: { 
      users: [] 
     }, 
     ready: function(){ 
      this.$http.get('users.json').then(function(response){ 

       console.log(JSON.stringify(response.data)); 
       this.users = response.data; 
      }, function(response){ 
       console.log("fail"); 
       console.log(JSON.stringify(response)); 
      });     
     } 
    });   
}); 

Et cela fonctionne très bien! Parce que j'utilise des turbines, j'ai également inclus le page:change event. Et à mon avis index.html.erb j'ai accès à l'instance de Vue.Donc, cela fait fonctionner cette affaire et c'est bien pour cette question particulière, mais j'ai maintenant un autre problème de travail avec les composants .vue, peut-être que je vais ouvrir une autre question à ce sujet.

Notez que dans mon index.html.erb vue j'ai accès à l'instance Vue défini dans le fichier users.js dans le dossier assets/javascript/, mais que j'ai pas accès à Vue ou l'un des modules js chargés de browserify des vues dossier

Answer 2

Mise à jour: gem [vuejs][1] est livré avec vue 2.x et vue-router 2.x.

J'ai donc créé gem [vuejs][1] car j'utilisais vue.js sur plusieurs projets + prototypes et la gemme vuejs-rails ne semble pas mettre à jour leur gem avec la dernière version de vue.js.

Si vous êtes comme moi, à la recherche d'une intégration facile de vue.js avec pipeline d'actifs + vous voulez utiliser les dernières vue.js, continuez à lire:

Ajouter cette ligne à Gemfile de votre application:

gem 'vuejs' 

A application.js

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require vue 
//= require vue-router 
//= require vue-resource 
//= require_tree . 

//= require vue-router et //= require vue-resource sont facultatifs.

Notez que pour vue & 2.x vue-routeur, vous devez avoir besoin de ce lieu

//= require vue2 
//= require vue-router2 

Voilà. Vous pouvez essayer d'écrire du javascript dans l'une des vues pour le tester.

Essayez celui-ci:

<div id="app"> 
    <h1>Hi {{ message }}</h1> 
    <input v-model="message"> 
</div> 

<!-- <span>Message is: {{ message }}</span> 
<br> 
<input type="text" v-model="message" placeholder="edit me"> --> 

<script type="text/javascript"> 
new Vue({ 
    el: '#app', 
    data: { 
    message: 'Bryan' 
    } 
})</script> 

source: https://github.com/ytbryan/vuejs

Answer 3

Essayez d'utiliser le Breakfast Gem. Il y a un installation section pour Vue.js

Fondamentalement, une fois que vous installez le bijou que vous pouvez utiliser npm installer Vue, Vuex et Vue Router assez facilement.

Et il prend en charge les composants Vue unique.

Answer 4

Pour Rails 5.1+, il sera livré avec le support & webpack.

De plus, avec this pull request pour webpacker, Vue sera supporté dès la sortie de la boîte.

Pour commencer avec Vue sur Rails,

1. Ajouter gem 'webpacker' à Gemfile
2. bundle install
3. Run rails webpacker:install && rails webpacker:install:vue

Alternativement avec Rails 5,1x, faire rails new app --webpack=vue

Vous sera prêt pour Vue sur Rails 5