Как заставить rails работать с vue.Яш?

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

подробности

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

<%= javascript_include_tag params[:controller] %>

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

затем, чтобы попробовать это, я собрал ресурс пользователей с 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/ Папка я добавляю пользователей.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 в chrome, я вижу, что Vue добавлен, но я не вижу никакого ответа, и я уже вставил одного пользователя. Кстати, я пытаюсь с https://vuejs-rails-yerkopalma.c9users.io/users url (я разрабатываю в c9.io) и только просмотру. Итак, мои догадки:

  1. возможно, я использую vue-resource неправильно, Я имею в виду url, переданный
7
javascript ruby ruby-on-rails vue.js

4 ответов

для рельсов 5.1+, оно придет с поддержкой пряжи & webpack.

С этот запрос тянуть для webpacker, Vue будет поддерживаться из коробки.

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

  1. добавить gem 'webpacker' в gemfile
  2. bundle install
  3. выполнить rails webpacker:install && rails webpacker:install:vue

альтернативно с рельсами 5.1 x, do rails new app --webpack=vue

вы будете готовы к Vue на рельсах 5

10

мне удалось сделать эту работу с 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 событие. И на мой взгляд index.html.erb у меня есть доступ к экземпляру Vue. Так что это делает этот случай рабочим, и это нормально для этого конкретного вопроса, однако теперь у меня есть еще одна проблема, работающая с .vue компоненты, возможно, я открою еще один вопрос об этом.

обратите внимание, что в моем index.html.erb view у меня есть доступ к экземпляру Vue, определенному в на , но это у меня нет доступа к Vue или любой из модулей js, загруженных browserify из папки views

4

попробуйте использовать Завтрак. Есть раздел Установка для Vue.js

в основном после установки драгоценного камня вы можете использовать npm установить Vue, Vuex и Vue Router довольно легко.

и он поддерживает один файл Vue компонентов.

4

обновление: gem [vuejs][1] nows поставляется с vue 2.x и vue-маршрутизатор 2.х.

Итак, я создал gem [vuejs][1] потому что я использовал vue.js в нескольких проектах + прототипы и gem vuejs-rails похоже, не обновляет свой драгоценный камень с последней версией vue.js.

если вы похожи на меня, ищете легкую интеграцию vue.js с конвейером активов + вы хотите использовать последний vue.Яш, читаем дальше:

добавьте эту строку в приложение Gemfile:

   gem 'vuejs'

в приложения.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

1