如何使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