# Rails + webpack + vue
Webpackerのインストール


    $ bin/rails webpack:install


以下が作成される

- app/javascript/packs/application.js
- bin/webpack
- bin/webpack-dev-server
- bin/webpack-watcher
- config/webpack/development.js
- config/webpack/production.js
- config/webpack/shared.js
- yarn.lock

以下が編集される

- .gitignore
- config/environments/development.rb
- config/environments/production.rb
- package.json


# Vueのインストール
    $ rails webpacker:install:vue

**app/javascript/packs/app.vue**

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

    <script>
    module.exports = {
      data: function () {
        return {
          message: "Hello Vue!"
        }
      }
    }
    </script>

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


    /* eslint no-console: 0 */
    // Run this example by adding <%= javascript_pack_tag 'hello_vue' %>
    // 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/dist/vue.esm'
    import App from './app.vue'

    document.addEventListener('DOMContentLoaded', () => {
      document.body.appendChild(document.createElement('hello'))
      const app = new Vue({
        el: 'hello',
        template: '<App/>',
        components: { App }
      })

      console.log(app)
    })

以下が編集される

- config/webpack/shared.js
- package.json
- yarn.lock