[第五隻羊] 迷霧森林建築工事 IV 專案環境設定 READY GO

2021 iThome 鐵人賽

DAY 5

Software Development

透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計系列第 5 篇

13th鐵人賽狼人殺桌遊設計

毛毛

團隊森上梅友前

2021-09-20 01:26:52

685 瀏覽

天亮了昨晚是平安夜

關於迷霧森林故事

小狼現身請睜眼

待洛神解釋完了迷霧森林的由來
知悉了 animal 們計畫的小狼們並沒有看出阿虎是想要透過舞會找出過往的殺 animal 的兇手
對他們來說這個舞會趴踢只會讓他們更容易找到間隙下手殺害下一個人
講到這裡
小狼們不經意的竊笑著
但是他們可以慢慢討論畢竟距離趴踢晚會還有兩天的時間
並假裝跟其他 animal 一樣盛裝打扮
在森林的另一頭

https://www.artstation.com/artwork/L2Wvrl
阿虎也沒有閒著
他試著在趴踢之前過濾全森林 animal 清單
希望能在活動開始之前找出可以信任的 animal
所以他先找了也是藍鳥布魯好朋友的呱呱舉辦舞會的真正目的

圖片來源
呱呱聽完雖然也表認同
但完全沒有頭緒該怎麼開始
阿虎只跟他說了一聲不用擔心
到時他會給呱呱暗號給指示照著做就可以了
此時浣熊跟小狐狸也在回家已經約好兩天後要一起去舞會現場

圖片來源
在回家的分岔路上分道揚鑣
就當浣熊Rocky回到家說我回來了
家裡卻沒有人應門

圖片來源
待續..

動物園派對

再來我們就要把 vite 跟 vue 加入專案之中
首先我們在 gemfile 裏面把 webpacker 換成 vite
並移除~~gem 'webpacker', '~> 5.0'~~

../app//gemfile.rb

gem 'vite_rails'

接下來我們要將vite編譯器初始化

$ bundle
$ bundle exec vite install

這個指令會幫我們跑 vite 與 vite-ruby
緊接著在兩個專案目錄下的 command line 分頁分別打上

$ bin/vite dev

$ rails server

就可以完成 vite 編譯器取代 webpacker了
這些步驟幫我們自動追加了這些檔案

bin/vite
vite.config.ts
config/vite.json
並透過 console 可以印出 Vite ⚡️ Rails

app/javascript/entrypoints/application.js

console.log('Vite ⚡️ Rails')

// If using a TypeScript entrypoint file:
//     <%= vite_typescript_tag 'application.jsx' %>
//
// If you want to use .jsx or .tsx, add the extension:
//     <%= vite_javascript_tag 'application.jsx' %>

console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')

同時在我們的application.html.erb進入點
導入vite的js物件

<!DOCTYPE html>
<html>
  <head>
    <title>Zooparty</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= vite_client_tag %>
    <%= vite_javascript_tag 'application' %>
    <!--
      If using a TypeScript entrypoint file:
        vite_typescript_tag 'application'

      If using a .jsx or .tsx entrypoint, add the extension:
        vite_javascript_tag 'application.jsx'

      Visit the guide for more information: https://vite-ruby.netlify.app/guide/rails
    -->

  </head>

  <body>
    <%= yield %>
  </body>
</html>

如此一來我們就成功導入vite到專案中了

參考資料：