Как сделать рельсы работать с vue.js?

Question

Ну, мой вопрос прост, как сделать приложение Ruby on Rails работать с Vue.js?

Детали

Я первый смотреть на vue-rails драгоценный камень, но добавить Vue к трубопроводу рельсы активов, и я хочу работать с другими пакетами НПМ, как browserify. Затем я смотрю на это, browserify-rails, которые позволяют использовать commonjs в папке js app/assets/javascript/. Также я планирую сделать приложение Vuejs для каждого контроллера рельсов и получить доступ к бэкэнд-действиям с помощью vue-resource и vue-router (если это нехороший подход, пожалуйста, дайте мне знать), поэтому я добавил следующую строку в мой макет

<%= javascript_include_tag params[:controller] %> 

Это добавит JS файл с именем контроллера, поэтому UsersController будет иметь users.js файл с основным приложением ви для этого контроллера.

Затем, чтобы попробовать это я scaffolded а пользователи ресурса с рельсами, и сделать его визуализации формат 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)); 
     }); 
    } 
}); 

И когда я инспектировать Dev консоли в хром, я вижу, что Vue добавляется, но я не вижу никакого ответа, и я уже вставлен один пользователь. Кстати, я пытаюсь использовать url https://vuejs-rails-yerkopalma.c9users.io/users (я развиваюсь в c9.io), и отображается только файл /users/index.html.erb. Так, WAHT мои догадки:

1. я мог бы использовать vue-resource в неправильном направлении, я имею в виду URL передается функции 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.

Сначала я добавил объект el к объекту, переданному в конструктор 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 зрения у меня есть доступ к экземпляру Вью, определенной в users.js файл в папке assets/javascript/, но я не доступ к Vue или любой из Js модулей, загруженных с browserify с мнением папки

Answer 2

Обновление: драгоценный камень [vuejs][1] выпускает корабли с vue 2.x и vue-router 2.x.

Поэтому я создал gem [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 не являются обязательными.

Обратите внимание, что для вю & вю-маршрутизатор 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+ он будет поставляться с пряжей & поддержка веб-пакета.

Кроме того, с помощью this pull request в webpacker Vue будет поддерживаться из коробки.

Чтобы начать работу с Vue на Rails,

1. Добавить gem 'webpacker' в Gemfile
2. bundle install
3. Run rails webpacker:install && rails webpacker:install:vue

В качестве альтернативы с Rails 5.1x, сделать rails new app --webpack=vue

You будет готов к Vue on Rails 5