Question

我的问题很简单，如何让Ruby on Rails应用程序与Vue.js一起使用？

详情

我首先看一下vue-rails gem，但是将Vue添加到rails资产管道中，我想使用其他npm包，比如browserify。然后我看一下，browserify-rails启用js文件夹app/assets/javascript/中的commonjs。另外，我计划为每个rails控制器制作一个Vuejs应用程序，并使用vue-resource和vue-router访问后端操作（如果这不是很好的方法请告诉我），所以我在布局中添加了以下行

<%= javascript_include_tag params[:controller] %>

这将添加一个带有控制器名称的js文件，因此UsersController将包含users.js文件以及该控制器的主vue应用程序。

然后，为了尝试这个，我使用rails搭建了一个Users资源，并使其在每个动作中呈现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文件。所以，这是我的猜测：

我可能以错误的方式使用vue-resource，我的意思是将网址传递给get()函数。
我可能会遗漏一些vue-resource配置。
也许我应该使用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

对于Rails 5.1+，它将带有纱线＆amp; webpack支持。

此外，通过this pull request到webpacker，Vue将支持开箱即用。

开始使用Vue on Rails，

将gem 'webpacker'添加到gemfile
bundle install
运行rails webpacker:install && rails webpacker:install:vue

或者使用Rails 5.1x，执行rails new app --webpack=vue

您将为Vue on Rails 5做好准备

Answer 2

我设法与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视图中，我可以访问users.js文件夹中assets/javascript/文件中定义的Vue实例，但我无法访问Vue或任何从views文件夹
加载了browserify的js模块

Answer 3

尝试使用Breakfast Gem。 Vue.js有installation section

基本上，一旦安装了gem，您就可以使用npm轻松安装Vue，Vuex和Vue Router。

它支持单个文件Vue组件。

Answer 4

更新：gem [vuejs][1] nows附带vue 2.x和vue-router 2.x.

所以我创建了gem [vuejs][1]因为我在多个项目+原型中使用了vue.js而gem vuejs-rails似乎没有用最新版本的vue.js更新他们的gem。

如果你像我一样，寻找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＆amp; vue-router 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

如何让rails与vue.js一起使用？

4 个答案: