如何让 rails 与 vue.js 一起工作？

Question

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

详情

我首先查看了 vue-rails gem, but that add Vue to the rails asset pipeline, and I want to work with other npm packages, like browserify. Then I look to that, browserify-rails that enable commonjs in the js folder app/assets/javascript/. Also I'm planning to make a Vuejs app for every rails controller, and access to backend actions with the vue-resource and vue-router（如果这不是一个好的方法请告诉我），所以我在我的布局中添加了以下行

<%= javascript_include_tag params[:controller] %>

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

然后，为了尝试这个，我用 rails 构建了一个用户资源，并让它在每个操作中呈现 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 url（我正在 c9.io 中开发）并且只呈现 /users/index.html.erb 文件。所以，我的猜测是什么：

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

我设法用 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。

所以我创建了 gem [vuejs][1] 因为我在多个项目 + 原型中使用 vue.js 并且 gem vuejs-rails 似乎没有更新他们的 gem 与最新版本的 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-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

Answer 3

尝试将 Breakfast Gem. There is an installation section 用于 Vue.js

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

并且支持单文件Vue组件

Answer 4

对于 Rails 5.1+，它将支持 yarn 和 webpack。

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

在 Rails、

开始使用 Vue

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

或者 Rails 5.1x，rails new app --webpack=vue

您将在 Rails 5

为 Vue 做好准备

如何让 rails 与 vue.js 一起工作？

How to make rails work with vue.js?

javascript

ruby

ruby-on-rails

vue.js