Rails 5.x 使用Webpacker + Vue

1.安装webpacker

增加gem

gem 'webpacker', '~> 5.2', '>= 5.2.1'

安装:

bundle
bundle exec rails webpacker:install

安装后，您可以立即开始编写现代的ES6风格的JavaScript应用程序：

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  │   └── application.css
  └── src:
  │   └── my_component.js
  └── stylesheets:
  │   └── my_styles.css
  └── images:
      └── logo.svg

然后，您可以使用 javascript_packs_with_chunks_tag 在Rails视图中加载JavaScript。
如果有样式需要导入，则使用 stylesheet_packs_with_chunks_tag 链接它们：

<%= javascript_packs_with_chunks_tag 'application' %>
<%= stylesheet_packs_with_chunks_tag 'application' %>

<link rel="prefetch" href="<%= asset_pack_path 'application.css' %>" />
<img src="<%= asset_pack_path 'images/logo.svg' %>" />

在开发中，Webpacker默认情况下按需编译，而不是先编译，如果您想使用实时代码重载，或者您有很多JavaScript以致按需编译速度太慢，则需要运行 ./bin/webpack-dev-server

Webpacker已经将webpacker:compile task 挂载在 assets:precompile task 中，也就是说生产环境中，依然可以使用 RAILS_ENV=production bundle exec rake assets:precompile 编译静态文件。

在远程服务器上编译资产时，建议使用 yarn install --frozen-lockfile 安装，以确保已安装的软件包与yarn.lock文件匹配。

附：
关闭 sourcemap 加载， 在 config/webpack/development.js 中将 devtool 设置为 none：

const config = environment.toWebpackConfig()
config.devtool = 'none'
module.exports = config

2.安装Vue

bundle exec rails webpacker:install:vue

安装完成会有 hello_vue.js 在 app/javascript/packs/hello_vue.js 生成，里面有简单的例子说明如何使用。
如果你想使用rails erb 来加快开发，直接挂载dom，那么你需要导入 import Vue from 'vue/dist/vue.esm' 而不是 import Vue from 'vue'

/* 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 App from '../app.vue'

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

  console.log(app)
})


// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
//
<div id='hello'>
  {{message}}
  <app></app>
</div>


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 }
  })
})
//
//
//
// If the project is using turbolinks, install 'vue-turbolinks':
//
// yarn add vue-turbolinks
//
// Then uncomment the code block below:
//
import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'

Vue.use(TurbolinksAdapter)

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