2015-12-30 4 views
7

Beh, la mia domanda è semplice, come si fa a far funzionare un'app Ruby on Rails con Vue.js?Come far funzionare le rotaie 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 
+0

Nella chiamata '.then', non è stato specificato un gestore errori. Dovresti aggiungerne uno con la registrazione. Inoltre, utilizza l'ispettore del tuo browser Web per esaminare le richieste di rete effettive che vengono fatte per verificare che siano formate e inviate nel modo previsto. –

+0

vale la pena notare che vuejs-rails utilizza librerie vuejs obsolete. E se stai usando browserify-rail, allora non utilizzerai sprockets/application.js. Quindi dovresti davvero scegliere un modo per caricare le tue dipendenze javascript. – ytbryan

+0

@ytbryan Sto usando i pignoni e il file application.js (caricando jQuery e bootstrap da qui) insieme a binari di browserify senza problemi. Ad ogni modo, forse hai ragione su come usare solo un modo per gestire le dipendenze di js, ma non so perché hai dichiarato di librerie di vuejs obsolete. I binari di browserify caricano una versione obsoleta di Vue.js? –

risposta

4

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

1

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

+0

E quale estensione dovrebbero avere le tue opinioni? –

+0

Puoi elaborare? 'vuejs' porta semplicemente vue.js e la sua risorsa router + nella pipeline degli asset. Cosa intendi per estensione? – ytbryan

+1

Voglio dire che i componenti nelle app vue.js hanno un'estensione '.vue' e sono caricati con browserify o con webpack. il tuo gioiello gestisce questi file? o semplicemente portare l'oggetto vue alla pipeline? in tal caso, cosa sono gli altri pacchetti di npm? la tua gemma ti permette di usare moduli di terze parti npm? –

4

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.

8

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

+0

Sto usando in questo modo! Ma ho problemi ad usarlo insieme ai turbolinks, hai qualche suggerimento? –

+0

Puoi avviare l'app per rails senza turbolink 'rails new nome_app -J --webpack = vue' Per saperne di più https://github.com/rails/webpacker/issues/161 – ytbryan

+0

@DanielDocki Hai trovato un modo per usarlo con turbolink ? – aks

Problemi correlati