[学習用] RailsでUbuntuにnodo.js、yarn、Vue.jsをインストール

Ubuntu16 でRails+Vueを使うためにインストールしようとしたが
ハマったのでメモ。
この手順のままひたすらコマンドを打てば入る。

node.jsのインストール

$ sudo apt install -y nodejs npm
$ sudo npm install n -g
$ sudo n stable
$ sudo apt purge -y nodejs npm
$ exec $SHELL -l
$ node -v

Yarnのインストール

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update && sudo apt-get install yarn

Railsで使う

$ rails new myapp --webpack=vue
$ rails webpacker:install

$ rails webpacker:install:vue
$ rails g controller Page home

ルーティング

routes.rb

Rails.application.routes.draw do
  root to: 'page#home'
end

記述するところと設定

HTMLとして記述する場合は下記の様にする

app/javascript/packs/hello_vue.js

import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#hello',
    data: {
      message: "Can you say hello?"
    },
    components: { App }
  })
})

Viewsに記述

app/views/page/home.html.erb

<h1>Page#home</h1>
<%= javascript_pack_tag 'hello_vue' %>

<div id='hello'>
  {{message}}
  <app></app>
</div>

表示確認

こんな感じで表示されるはず！

表示出来たら

Vue.jsをサンプルをひたすら読む。
https://vuejsexamples.com/

参考・迷ったら

https://www.d0nchan.com/entry/2018/01/30/103000
https://qiita.com/seibe/items/36cef7df85fe2cefa3ea
https://qiita.com/cohki0305/items/582c0f5ed0750e60c951