vue.jsでレールを動作させる方法は？

Question

私の質問は簡単です、どのようにRuby on RailsアプリケーションをVue.jsで動作させるのですか？

詳細

私が最初vue-rails宝石を見て、それがレール資産パイプラインへのVueを追加し、私はbrowserifyのように、他のNPMのパッケージと仕事をしたいです。それから、jsフォルダのcommonjsを有効にするbrowserify-railsを参照してください。app/assets/javascript/また、すべてのレールコントローラ用のVuejsアプリを作成し、vue-resourceとvue-routerのバックエンドアクションにアクセスする予定です（これは良い方法でない場合は教えてください）ので、レイアウトに次の行を追加しました

UsersControllerは、そのコントローラの主なVUEアプリで users.jsファイルを持っていますので、コントローラの名前とJSファイルを追加します

<%= javascript_include_tag params[:controller] %> 

。私は、ユーザーがレールとリソース、およびそれが正常に動作しているこの

def index 
    @users = User.all 

    respond_to do |format| 
     format.html # index.html.erb 
     format.json { render json: @users } 
    end 
end 

のように、すべてのアクションにJSON形式をレンダリングしますスキャフォールドし、これを試して次に

、。その後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のが追加されますが、私は任意の応答が表示されていない、と私はすでに持っていたことがわかり1人のユーザーを挿入しました。ところで、私はhttps://vuejs-rails-yerkopalma.c9users.io/users URLで試しています（私はc9.ioで開発中です）、/users/index.html.erbファイルだけがレンダリングされます。だから、私の推測WAHTです：

1. 私は間違った方法でvue-resourceを使用している場合があります、私はget()関数に渡されたURLを意味します。
2. vue-resourceの設定が不足している可能性があります。
3. たぶん私はちょうどbrwoserify-railsと組み合わせたvue-railsの宝石を使うべきですが、私はちょうどその方法を知らないのです。どんな助けやガイドラインも感謝します。ここで

私はVue.js.でこの作業を行うために管理私の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コンストラクタに渡されたオブジェクトにelプロパティを追加しました.という要素が定義されていないというエラーが表示されました。明らかに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)); 
      });     
     } 
    });   
}); 

これは問題ありません。

私はターボリンクを使用しているので、page:change eventも含まれています。私の見解では、index.html.erb私はVueのインスタンスにアクセスできます。このため、このケースは機能し、この特定の質問には問題ありませんが、.vueコンポーネントで動作する別の問題が発生しました。別の質問をします。私index.html.erbビューで、私はassets/javascript/フォルダ内のusers.jsファイルで定義されたVueのインスタンスへのアクセス権を持っていますが、が、私はVueのにアクセスしたり、jsのモジュールのいずれかの景色フォルダ

からbrowserifyをロードしていないということを

お知らせ

Answer 2

アップデート：gem [vuejs][1] vows 2.xおよびvue-router 2.xが付属しています。

私は複数のプロジェクト+プロトタイプでvue.jsを使用していたので、宝物[vuejs][1]を作成しました。宝石vuejs-railsは最新バージョンのvue.jsで宝石を更新していないようです。

アセットパイプラインでvue.jsの容易な統合を探して、私のようなもの+最新vue.jsを使用したい場合は、上の読み：

を、アプリケーションのGemfileに次の行を追加します。

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で

gem 'vuejs' 

はオプションです。 VUE & VUE-ルータ2.xのために、あなたはそれをだこれらの代わりに

//= require vue2 
//= require vue-router2 

を要求する必要があること

は

注意。ビューの1つにいくつかの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を使用してみてください。あなたは非常に簡単にVue、VuexとVue Routerをインストールするnpmを使用することができます宝石をインストールするとVue.js

ためinstallation sectionは基本的にあります。

そして、単一ファイルのVueコンポーネントをサポートしています。

Answer 4

Rails 5.1+の場合、糸は& webpackのサポートが付属します。

また、webpackerにthis pull requestを指定すると、Vueはそのままの状態でサポートされます。Railsの上でのVueを始めるために

、

1. がrails new app --webpack=vue

   にあなたの操作を行い、Railsの5.1xで

2. bundle install
3. ラン代わりrails webpacker:install && rails webpacker:install:vue

をgemfileするgem 'webpacker'を追加Vue onの準備が整いますRails 5