在 Rails 使用 Webpacker 導入 vue-element-admin
前言 小弟最近工作開始寫 Ruby，那就來分享一下最近遇到的突破吧。 這次遇到的專案原本後端是 Ruby 前端是 Angular 1.X， 在2020年還可以看到 Angular已經來到 Angular 9 (released on 2020/2/7) 前端還在上古時代，這樣還能號稱 科技公司？ 這樣說有點誇張，因爲其他新的專案已經使用 vue 為了要讓公司的技術單純化，同事提出了 混用 vue, Angular ，新的頁面使用 vue，舊的頁面使用 Angular 逐一淘汰 舊的頁面。 這邊使用的版本 Ruby : v2.5.7 Rails : v4.2.11 webpacker : v4.0.2 vue-element-admin : v4.0.0 Rails Rails 是很標準的MVC 架構，對於 file structure與 naming 有這強烈的規定。 要混用就必須了解 Rails 的 route 設定，Controller，view的位置，才能更好理解。 設計的目標： root(/) 走舊的 Angular, /vue/ 下走新的 vue (如果 是新的專案 可以直接跳過這一單元) route config/routes.rb 這樣 root 會去問 page_controller vue 會去問 vue_controller controller app/controllers/page_controller.rb 這跟一般的controller 沒什麼不一樣，如果是default application_controller.rb 是可以略掉的 app/controllers/vue_controller.rb 因為 vue 是新的 layout，我們這邊規定，這個controller 要用特定的layout，layout的設定請看下面的 view view app/views/layouts/application.html.erb 這裏是原本 angular 的entry layout 這裡寫 ‘application’ 會對應到 app/assets/javascripts/application.js detail 要怎麼在 Rails 寫 Angul