今話題ののvue.jsを既存のrailsのアプリケーションで使ってみたかったので、使う際の手順を書いておきます。
vue.jsに関しては、かなりまとめられた記事があるのでそちらを参考にしてください。
参考:
Vue.js概要?
はじめよう Vue.js
Vue.jsから手軽に始めるJavaScriptフレームワーク
##インストール
まずはvue.jsをインストールしましょう。
本家サイトからインストールしてきても良いかと思いますが、今回はRails Assetsを使ってインストールします。
####Rails Assetsとは?
Rails Assetsは少し前に話題になった、Bower(※Twitter社が作ったフロントエンド用のパッケージマネージャ)で管理しているパッケージをbundlerでインストールできるサービス。
Rails Assetsに関しての参考記事:
bowerパッケージをbundlerで管理するRails Assetsを使ってみた
Railsプロジェクトでassetsファイルを効率的に管理する
Rails Assets を使って Rails プロジェクトに AngularJS をインストール
Bowerに関しての参考記事:
Bower入門(基礎編)
パッケージマネージャー「Bower」が大変便利で捗りそうです
Gemfileに下記を追加。
source 'https://rails-assets.org'
gem 'rails-assets-vue'
$ bundle install
...
Installing rails-assets-vue 0.10.6
...
無事vue.jsが入った。
application.jsに下記を追加すれば完了。
//= require vue
##実際に書いてみる
簡単なコードを実際に書いてみる。
rubyのテンプレートエンジンをerbであれば{{msg}}を書けば問題ないが、slimにしていたので、ちょっとだけ手こずったw
="{{}}"こう書かないとだめみたいです。
$ ->
new Vue(
el: '#hoge',
data:
msg: 'Hello Vue.js!'
)
div#hoge
= "{{msg}}"
無事表示されました。これでvue.jsが使える(´ω`)=3