Come far funzionare le rotaie con vue.js?

Question

Beh, la mia domanda è semplice, come si fa a far funzionare un'app Ruby on Rails con Vue.js?

I dettagli

ho guardo il vue-rails gioiello, ma che aggiungo Vue alla pipeline rotaie di asset, e voglio lavorare con altri pacchetti NPM, come browserify. Poi guardo a quello, browserify-rails che abilita i commonjs nella cartella js app/assets/javascript/. Inoltre sto pensando di creare un'app Vuejs per ogni controller di rotaie e accedere alle azioni di backend con lo vue-resource e vue-router (se questo non è un buon approccio, per favore fatemelo sapere), così ho aggiunto la seguente riga al mio layout

<%= javascript_include_tag params[:controller] %> 

che aggiungerà un file js con il nome del controller, in modo che il UsersController avrà il file con l'applicazione users.js vue principale per tale controller.

Poi, di provare questo ho ponteggi un fruitori delle risorse con le rotaie, e la rendono di rendering formato JSON in ogni azione, in questo modo

def index 
    @users = User.all 

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

Ciò sta funzionando benissimo. Poi nella cartella app/assets/javascript/ aggiungo users.js con il seguente contenuto

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)); 
     }); 
    } 
}); 

E quando ho ispezionare console dev in cromo, vedo che viene aggiunto Vue, ma non vedo alcuna risposta, e ho avuto già inserito un utente. A proposito, sto provando con l'url https://vuejs-rails-yerkopalma.c9users.io/users (sto sviluppando in c9.io) e viene eseguito il rendering solo del file /users/index.html.erb. Così, il livello qualitativo sono le mie supposizioni:

1. potrei utilizzerò vue-resource in modo sbagliato, voglio dire l'url passato alla funzione get().
2. Potrebbe mancare qualche configurazione vue-resource.
3. Forse dovrei usare la gemma vue-rails combinata con brwoserify-rails ma non so come. Qualsiasi aiuto o linea guida sarebbe gradito.

Ecco il mio file di application.js (è anche incluso nel mio file di layout)

// 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

sono riuscito a fare questo lavoro con Vue.js.

prima ho aggiunto una proprietà el all'oggetto passato al costruttore Vue, e ho iniziato a ricevere un errore che diceva che l'elemento body non era definito. Ovviamente l'elemento body è sempre presente in un file html, quindi ho pensato che fosse un problema su quando sono state create le istanze Vue. Quindi ho semplicemente avvolto tutto su un evento 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)); 
      });     
     } 
    });   
}); 

E funziona bene!

Poiché utilizzo i turbolinks, ho incluso anche lo page:change event. E a mio avviso index.html.erb ho accesso all'istanza Vue.Quindi questo rende questo caso funzionante e va bene per questa particolare domanda, tuttavia ora ho un altro problema con i componenti .vue, forse aprirò un'altra domanda a riguardo.

Si noti che a mio index.html.erb vista ho accesso all'istanza Vue definito nel users.js file nella cartella assets/javascript/, ma che io non ho accesso a Vue o uno qualsiasi dei moduli js caricati con browserify dalle visualizzazioni di cartella

Answer 2

Aggiornamento: gemma [vuejs][1] navi con vue 2.xe vue-router 2.x.

Così ho creato la gemma [vuejs][1] perché stavo usando vue.js su più progetti + prototipi e la gemma vuejs-rails non sembra aggiornare la gemma con l'ultima versione di vue.js.

Se siete come me, alla ricerca di una facile integrazione di vue.js con tubazione di asset + che si desidera utilizzare gli ultimi vue.js, continuate a leggere:

aggiungere questa linea al Gemfile dell'applicazione:

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 e //= require vue-resource sono opzionali.

Si noti che per vue & vue-router 2.x, è necessario richiedere questi invece

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

Questo è tutto. Puoi provare a scrivere qualche javascript in una delle viste per provarlo.

provare questo:

<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> 

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

Answer 3

Provare a usare la Breakfast Gem. C'è un installation section per Vue.js

In pratica una volta che si installa la gemma è possibile utilizzare npm installare Vue, Vuex e il Vue Router abbastanza facilmente.

E supporta componenti Vue a file singolo.

Answer 4

Per Rails 5.1+, verrà fornito con il supporto per il Webpack &.

Inoltre, con this pull request su webpacker, Vue sarà supportato immediatamente.

per iniziare con Vue on Rails,

1. Aggiungi gem 'webpacker' a Gemfile
2. bundle install
3. Run rails webpacker:install && rails webpacker:install:vue

alternativa con Rails 5.1x, fare rails new app --webpack=vue

È sarà pronto per Vue on Rails 5