전제 조건

Rails6

Vue.js 2.6.10

vuetify 2.1.13

yarn이 들어있는 것

구축 절차

1. rails new로 프로젝트 만들기

이때 --webpack=vue를 지정한다.

bash

rails new --webpack=vue

이때 yarn이나 webpacker 관련의 에러가 발생했을 경우는 이하의 기사를 참고해 주세요

Rails6 개발시 어색한 webpacker, yarn 관련 오류 및 해결 방법

서버 시작

bash

rails s

http://localhost:3000/ 에 접속해 다음의 화면이 표시되면 OK입니다.

2. Vue의 Hello World 표시

데이터베이스 만들기

bash

rails db:create

컨트롤러 작성

bash

rails g controller home index

라우팅 설정

config/routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

view 만들기

app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

다시 http://localhost:3000 에 접속해 이하의 화면이 표시되면 Vue의 환경 구축은 완료입니다.

3. Vuetify 설치

yarn을 사용하여 vuetify를 설치합니다.

bash

yarn add vuetify

아래의 표시가 되면 설치 완료입니다

bash

✨  Done in 7.03s.

4. Vuetify 버튼 표시

Vuetify 로드

rails new --webpack=vue 덕분에 기본적으로 생성된다고 생각합니다.

app/javascript/packs/hello_vue.js

import Vue from "vue";
import App from "../app.vue";


document.addEventListener("DOMContentLoaded", () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount();
  document.body.appendChild(app.$el);

  console.log(app);
});

이 파일을 편집합니다.

app/javascript/packs/hello_vue.js

import Vue from "vue";
import Vuetify from "vuetify"; // 追加
import "vuetify/dist/vuetify.min.css"; // 追加
import App from "../app.vue";

Vue.use(Vuetify); // 追加
const vuetify = new Vuetify(); // 追加

document.addEventListener("DOMContentLoaded", () => {
  const app = new Vue({
    vuetify, // 追加
    render: h => h(App)
  }).$mount();
  document.body.appendChild(app.$el);

  console.log(app);
});

Vuetify에서 표시할 파일 만들기

여기도 기본적으로 만들어진 것 같습니다.

app/javascript/app.vue

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "Hello Vue!"
    };
  }
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

이 파일에 Vuetify 버튼을 추가합니다.

app/javascript/app.vue

<template>
  <v-app id="app"> <!-- 追加 -->
    <v-btn>Vuetifyのボタン</v-btn> <!-- 追加 -->
    <div>  <!-- 更新 -->
      <p>{{ message }}</p>
    </div>
  </v-app> <!-- 追加 -->
</template>

<script>

이것으로 http://localhost:3000 에 접속해, 이하와 같은 표시가 되면
Rails + Vue + Vuetify의 환경 구축이 완료되었습니다!



미안해!

끝에

이 기사가 여러분의 Rails 라이프의 도움이 되면 다행입니다.
이 외에도 Rails 중심의 기사를 쓰고 있습니다!