Leon's Blogging

Coding blogging for hackers.

Rails 5 初探 Vue + Webpack

| Comments

Rails5.x.x 已經出來一段時間了，聽說增加了不少東西，來研究順便記錄一下~

後端

  • rake 有些相關指令可改用 rails (rake db:migrate to rails db:migrate原來的 rake 指令還是可以用)

前端

1
2
3
4

# Webpack
1.將許多javascript的檔案包在一起，減少request的次數
2.利用 Loader將ES6編譯成ES5的語法，讓瀏覽器能順利讀取
3.整合ES Modules、CommonJS和AMD，等等的模組

建立專案 with Webpack & Vue

新的專案

1
2

# 可改成 react or angular
rails new myapp --webpack=vue

原本的專案

記得先 brew install yarn (預設會用 yarn 來安裝)

1
2
3
4
5
6

# Gemfile
gem 'webpacker'

# command
rails webpacker:install
rails webpacker:install:vue

1
2
3
4
5
6
7
8
9
10
11
12
13

rails webpacker

# show 出所有 webpacker 可用的指令
# Available webpacker tasks are:
# webpacker:install             
# webpacker:compile             
# webpacker:check_node          
# webpacker:check_yarn          
# webpacker:verify_install      
# webpacker:yarn_install        
# webpacker:install:react       
# webpacker:install:vue         
# webpacker:install:angular

新增檔案

在 app/javascript/pack 的所有檔案會自動被 webpack compiled

1
2
3
4
5
6
7
8
9
10

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

Rails 會自動產生 vue component 的 sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# app.vue
<template>
  <div id="app">
    <p></p>
  </div>
</template>

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

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

# hello_vue.js
import Vue from 'vue'
import App from './app.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('hello'))
  const app = new Vue(App).$mount('hello')

  console.log(app)
})

建立 controller

1

bundle exec rails g controller pages index

更改 page index 內容 & router

1
2
3
4
5
6
7

# app/views/pages/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>s
<%= stylesheet_pack_tag 'application' %>

# router
# root to: 'pages#index'
root 'pages#index'

啟動

  • 啟動後，Webpacker 會自動 Compiling
  • 若是有修改 vue 裡面的內容，頁面重新整理會在自動 Compiling
1
2
3
4
5
6
7
8
9

rails s

Started GET "/" for 127.0.0.1 at 2017-09-17 11:58:29 +0800
Processing by PagesController#index as HTML
  Rendering pages/index.html.erb within layouts/application
[Webpacker] Compiling…
[Webpacker] Compiled all packs in /Users/leon/Code/practice/rails5/myapp/public/packs
  Rendered pages/index.html.erb within layouts/application (4828.5ms)
Completed 200 OK in 6547ms (Views: 6249.7ms)
  • 也可以手動啟動 Webpack Dev Servers
  • 這樣修改 vue 的內容，只要檔案 save 就會自動 Compiling，不需要面重新整理 (vue-hot-reload)

開兩個 terminal

1
2
3

# 啟動
rails s
bin/webpack-dev-server

forman gem

一次可以啟動多個 processs

1
2
3
4
5
6
7
8
9

# Gemfile
gem 'foreman'

# Procfile
backend: bin/rails s -p 3000
frontend: bin/webpack-dev-server

# 啟動
foreman start

教學文件:

參考文件:

webpack

Vue

Comments