既に動いてるRailsにVue.jsを導入する
webpackerをgemに追加
gem 'webpacker'
導入開始
$ bundle install
$ bundle exec rails webpacker:install
Vue.jsを使う
$ bundle exec rails webpacker:install:vue
app/javascript/packs/hello_vue.jsを下記のコードに書き換える
import Vue from 'vue/dist/vue.esm'
document.addEventListener('DOMContentLoaded', () => {
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
})app/views/layouts/application.html.erbのheadに下記を追加
<%= javascript_pack_tag 'hello_vue' %>
app/views/pages/welcome.html.erbにVueを書く
<div id="app">
{{ message }}
</div>すると下記のように出力されます。
Hello Vue!これでもいいけど
<%= javascript_pack_tag 'hello_vue' %>
<div id="app">
{{ message }}
</div>参考(とりえずこの本読めば詳しいところわかると思う)
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！