Rails+Vue.js+Vuetify 환경 구축 절차

자신의 메모입니다.

환경





버전


MacOS
10.13.6

yarn
1.3.2

vue
2.5.17

vue-loader
15.4.2

루비
2.4.1

Rails
5.2.1


목차


  • webpacker의 Hello World까지
  • Vue.js의 Hello World까지
  • Vuetify 동작 확인

  • 1. webpacker의 Hello World까지


    webpackerGem를 설치합니다.
    $ bundle exec rails new rails_vuetify_demo
    $ cd rails_vuetify_demo
    
    $ vim Gemfile
    gem 'webpacker', github: 'rails/webpacker'
    $ bundle install --path vendor/bundle
    $ bundle exec rails webpacker:install
    
    top_controller 를 생성하여 rootapplication.html.erb 를 표시할 수 있도록 합니다.
    $ bundle exec rails g controller top --no-assets --no-helper --no-test-framework --skip-routes --skip-template-engine
    $ vim app/controllers/top_controller.rb
    class TopController < ApplicationController
      def index
        render html: "", layout: true
      end
    end
    
    $ vim config/routes.rb
    Rails.application.routes.draw do
      # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
      root 'top#index'
    end
    
    javascript_include_tag 행을 삭제하고 app/javascript/packs/application.js 를 읽도록 수정한다.
    $ vim app/views/layouts/application.html.erb
    <!DOCTYPE html>
    <html>
      <head>
        <title>RailsVuetifyDemo</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>
    
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_pack_tag 'application' %> ←追加
      </head>
    
      <body>
        <%= yield %>
      </body>
    </html>
    

    브라우저 콘솔에 "Hello World from Webpacker"가 출력되는지 확인합니다.
    $ bin/webpack
    $ bundle exec rails s
    $ open http://localhost:3000
    

    2. vue.js의 Hello World까지


    webpacker 명령을 사용하여 Vue.js를 설치합니다. vue-loader 의 버전을 듣기 때문에, htps //w w. 음 pmjs. 코 m / Pac 카게 / ゔ 에아 r 에 쓰여져 있는 최신판(글쓰기 시점에서는 15.4.2)을 선택한다.
    $ bundle exec rails webpacker:install:vue
    ? Please choose a version of "vue-loader" from this list:
    15.4.2
    
    $ cat package.json
    {
      "name": "rails_vuetify_demo",
      "private": true,
      "dependencies": {
        "@rails/webpacker": "https://github.com/rails/webpacker",
        "vue": "^2.5.17",
        "vue-loader": "^15.4.2",
        "vue-template-compiler": "^2.5.17"
      },
      "devDependencies": {
        "webpack-dev-server": "^3.1.9"
      }
    }
    
    app/javascript/packs/hello_vue.js 를 읽도록 수정한다.
    $ vim app/views/layouts/application.html.erb
    <!DOCTYPE html>
    <html>
      <head>
        <title>RailsVuetifyDemo</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>
    
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_pack_tag 'hello_vue' %>
      </head>
    
      <body>
        <%= yield %>
      </body>
    </html>
    

    브라우저에 "Hello Vue!"가 표시되는지 확인합니다.
    $ bin/webpack
    $ bundle exec rails s
    $ open http://localhost:3000
    

    3. Vuetify의 동작 확인까지


    yarn를 사용하여 Vuetify를 설치합니다.
    $ yarn add vuetify
    $ cat package.json
    {
      "name": "rails_vuetify_demo",
      "private": true,
      "dependencies": {
        "@rails/webpacker": "https://github.com/rails/webpacker",
        "vue": "^2.5.17",
        "vue-loader": "^15.4.2",
        "vue-template-compiler": "^2.5.17",
        "vuetify": "^1.2.6"
      },
      "devDependencies": {
        "webpack-dev-server": "^3.1.9"
      }
    }
    
    vuetify.min.cssMaterialIcon 를 사용할 수 있도록 수정한다. (일단 CDN을 통해 로드)
    $ vim app/views/layouts/application.html.erb
    <!DOCTYPE html>
    <html>
      <head>
        <title>RailsVuetifyDemo</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>
    
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="    stylesheet">
        <%= javascript_pack_tag 'hello_vue' %>
      </head>
    
      <body>
        <%= yield %>
      </body>
    </html>
    
    Vue.js 에서 Vuetify 를 사용할 수 있도록 수정한다.
    $ vim app/javascript/packs/hello_vue.js
    /* eslint no-console: 0 */
    // Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
    // <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
    // to the head of your layout file,
    // like app/views/layouts/application.html.erb.
    // All it does is render <div>Hello Vue</div> at the bottom of the page.
    
    import Vue from 'vue'
    import Vuetify from 'vuetify'
    import App from '../app.vue'
    
    Vue.use(Vuetify)
    
    document.addEventListener('DOMContentLoaded', () => {
      const el = document.body.appendChild(document.createElement('hello'))
      const app = new Vue({
        el,
        render: h => h(App)
      })
    
      console.log(app)
    })
    
    Vuetify 의 적절한 컴포넌트를 표시하도록 app.vue 를 수정한다. 이번은 MaterialIcon 의 표시 확인도 하는 의미로, htps : // ゔ에치 fyjs. 코 m / 자 / 코 m 포넨 ts / 아 rts 에 있는 Alert 를 표시하고 있습니다.
    $ vim app/javascript/app.vue
    <template>
      <v-app>
        <p>{{ message }}</p>
        <v-alert
          :value="true"
          type="success"
        >
          This is a success alert.
        </v-alert>
      </v-app>
    </template>
    
    <script>
    export default {
      data: function () {
        return {
          message: "Hello Vue!"
        }
      }
    }
    </script>
    
    <style scoped>
    p {
      font-size: 2em;
      text-align: center;
    }
    </style>
    

    아래와 같은 표시가 되면 Vuetify 의 동작 확인으로서는 문제 없다고 생각합니다.

    github 에도 업하고 있습니다.
    htps : // 기주 b. 코 m / 구니 0128 / 라이 ls_ ゔ 에치 fy_

    좋은 웹페이지 즐겨찾기