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

Question

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

细节

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

<%= javascript_include_tag params[:controller] %>

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

然后，为了尝试这个，我使用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中检查dev控制台时，我看到Vue已添加，但我没有看到任何响应，并且我已经插入了一个用户。 顺便说一句，我正在尝试使用https://vuejs-rails-yerkopalma.c9users.io/users url（我在c9.io中开发）并且只渲染/users/index.html.erb文件。 所以，我的猜测是：

1. 我可能以错误的方式使用vue-resource ，我的意思是将url传递给get()函数。
2. 我可能会遗漏一些vue-resource配置。
3. 也许我应该使用vue-rails gem和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+，它将提供yarn＆webpack支持。

此外，通过对webpacker的拉取请求 ，Vue将开箱即用。

要开始使用Vue on Rails，

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

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

您将为Vue on Rails 5做好准备

Answer 2

我设法与Vue.js一起工作。

首先我添加了一个el propertie传递给Vue的构造函数的对象，我开始得到一个错误，说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模块views文件夹

Answer 3

尝试使用Breakfast Gem 。 Vue.js有一个安装部分

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

它支持单个文件Vue组件。

Answer 4

更新：gem [vuejs][1]附带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和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