Rails 5.1 导入 Vue

Vue太棒了。相比react的virtual dom大法，我们确确实实是在写html和js以及css。
Rails 5.1 加入了对各种JS前端框架的支持以及自带webpack， 所以，我们可以很方便就使用vue啦。

导入 vue

新建项目。

$ rails new myapp --webpacke=vue

我们会发现安装完成之后会多出来

app/javascript/packs                                                             
├── app.vue                                                                     
├── application.js                                                             
└── hello_vue.js

在view中嵌入hello_vue，就可以显示定义在app.vue模版中的内容了。

# app/views/layouts/application.html.erb

<%= javascript_pack_tag 'hello_vue' %>

为了实现SPA，我们需要添加vue-router。

$ yarn add vue-router

然后建一些components。在这些components里面建一些模版。
大概像下面这个样子。

app/javascript/packs                                                             
├── app.vue                                                                     
├── application.js                                                             
├── components                                                                
│   ├── home                                                                 
│   │   └── index.vue                                                       
│   └── layout
│       └── footer.vue
└── hello_vue.js

最后，就是加上路由啦。

// app/javascript/packs/hello_vue.js

import Vue from 'vue/dist/vue.esm.js'
import VueRouter from 'vue-router'



import  App from './app.vue'
import Footer from './components/layout/footer.vue'
import Home from './components/home/index.vue'


Vue.use(VueRouter)


Vue.component('my-footer', Footer)

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/',
          component: Home
        }
    ]
})

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#app',
    template: App,
    router
    })
})

注意点

1. vue需要动态编译template的话，需要把importvue.esm而不是vue

2. 不要混用require和import。这里只能用import。

以上。