«

既存のRails環境にVue.jsを追加する

今後、Webアプリケーションの開発はRails+Vue.js環境でしていくことにしたので いつか、既にあるRailsアプリにVueを追加したい時も来そうなのでメモ

Vue.js
https://jp.vuejs.org/index.html

今回の環境


Node.js 7.7.1インストール

$ nvm install v7.7.1

npmアップデート

$ npm update -g npm

webpackerインストール

#Gemfile
gem 'webpacker'
$ bundle install

Yarnインストール

$ npm i -g yarn

Webpackerインストール

$ rake webpacker:install

Vue.jsインストール

$ rake webpacker:install:vue

Webpackerのファイルを使えるように

<!-- application.html.erb -->
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

サンプルを取り敢えず動かしてみる

// app/javascript/packs/application.js
require('./hello_vue.js')

Rails s して立ち上げてみるとbodyの末尾に Hello Vue! と表示されてたらおしまい