如何使vue.js與rails一起工作？

Question

那麼我的問題很簡單，如何使Ruby on Rails應用程序與Vue.js一起工作？

細節

我第一次看vue-rails寶石，但添加的Vue到軌資產的管道，我想與其他NPM包時，像browserify。然後我看，browserify-rails，啓用js文件夾app/assets/javascript/ commonjs。此外，我打算爲每個鐵軌控制器製作一個Vuejs應用程序，並使用vue-resource和vue-router訪問後端操作（如果這不是一個好方法，請告訴我），所以我將以下行添加到了我的佈局

<%= javascript_include_tag params[:controller] %> 

這將增加與控制器名的js文件，所以UsersController將有users.js文件，該控制器的主要VUE應用。

然後，要試試這個我搭建的一個用戶軌資源，並使其呈現JSON格式的每一個動作，這樣

def index 
    @users = User.all 

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

這是工作的罰款。然後在app/assets/javascript/文件夾我添加users.js具有以下內容

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

當我檢查在Chrome瀏覽器開發控制檯，我看到的Vue增加，但我沒有看到任何反應，我已經插入一個用戶。順便說一下，我正在嘗試使用https://vuejs-rails-yerkopalma.c9users.io/users網址（我正在使用c9.io開發），並且僅渲染了/users/index.html.erb文件。 ，

1. 我可能會以錯誤的方式使用vue-resource我的意思傳遞給get()功能的網址：那麼，啥子是我的猜測。
2. 我可能會缺少一些vue-resource配置。
3. 也許我只是應該使用vue-rails寶石與brwoserify-rails結合，但我只是不知道如何。任何幫助或指導將不勝感激。

這裏是我的application.js文件（也包括在我的佈局文件）

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

我設法與Vue.js.這項工作

首先我給傳遞給Vue構造函數的對象添加了一個el特性，並且我開始出現一個錯誤，說明body元素沒有被定義。顯然body元素總是存在於一個html文件中，所以我認爲當創建了Vue實例時，這是一個關於的問題。所以我簡單地把所有的事情都包裝在一個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)); 
      });     
     } 
    });   
}); 

而且工作正常！

因爲我使用的是turbolinks，我還包含了page:change event。在我看來index.html.erb我有權訪問Vue實例。所以這使得這種情況下工作，這對於這個特定的問題很好，但是我現在有另一個問題與.vue組件一起工作，也許我會打開關於它的另一個問題。

請注意，在我的index.html.erb觀點我有機會在assets/javascript/文件夾中users.js文件中定義的Vue的實例，但我還沒有接觸到Vue公司或任何從意見裝有browserify的JS模塊的文件夾

Answer 2

更新：gem [vuejs][1]使用vue 2.x和vue-router 2.x的船舶。

因此，我創建了寶石[vuejs][1]，因爲我在多個項目+原型中使用vue.js，並且寶石vuejs-rails似乎沒有用最新版本的vue.js更新它們的寶石。

如果你像我一樣，尋找一種簡單的整合與資產管道vue.js的+你想使用最新的vue.js，請繼續閱讀：

此行添加到您的應用程序的Gemfile：

gem 'vuejs' 

在application.js中

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

//= require vue-router和//= require vue-resource是可選的。

注意，對於VUE & VUE路由器2.x中，你需要需要這些，而不是

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

就是這樣。您可以嘗試在其中一個視圖中編寫一些JavaScript來測試它。

試試這個：

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

來源：https://github.com/ytbryan/vuejs

Answer 3

嘗試使用Breakfast Gem。有一個installation section爲Vue.js

基本上一旦你安裝就可以使用npm寶石安裝Vue，Vuex和Vue Router很容易。

它支持單個文件Vue的組件。

Answer 4

對於Rails開發5.1+，它會與紗線& ISE WebPACK支持。

而且，與this pull request到webpacker，Vue公司將支持開箱即用。

要開始使用Vue的on Rails的，

1. 添加gem 'webpacker'到Gemfile中
2. bundle install
3. 運行rails webpacker:install && rails webpacker:install:vue

使用Rails 5.1倍

或者，做rails new app --webpack=vue

你將爲Vue做好準備Rails 5