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

라우팅

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

설명하는 곳과 설정

HTML로 기술하는 경우는 다음과 같이 한다

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에 작성

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

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

표시 확인

표시 할 수 있으면

참고 · 헤매면