iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Software Development

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

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

天亮了 昨晚是平安夜

關於迷霧森林故事

小狼現身請睜眼

待洛神解釋完了迷霧森林的由來
知悉了 animal 們計畫的小狼們並沒有看出阿虎是想要透過舞會找出過往的殺 animal 的兇手
對他們來說 這個舞會趴踢只會讓他們更容易找到間隙下手殺害下一個人
講到這裡
小狼們不經意的竊笑著
但是他們可以慢慢討論 畢竟距離趴踢晚會還有兩天的時間
並假裝跟其他 animal 一樣盛裝打扮
在森林的另一頭
https://ithelp.ithome.com.tw/upload/images/20210919/20131155dgSbKpQg2t.jpg
https://www.artstation.com/artwork/L2Wvrl
阿虎也沒有閒著
他試著在趴踢之前過濾全森林 animal 清單
希望能在活動開始之前找出可以信任的 animal
所以他先找了也是藍鳥布魯好朋友的呱呱舉辦舞會的真正目的
https://ithelp.ithome.com.tw/upload/images/20210919/201311557auYiSPjlM.jpg
圖片來源
呱呱聽完雖然也表認同
但完全沒有頭緒該怎麼開始
阿虎只跟他說了一聲不用擔心
到時他會給呱呱暗號給指示 照著做就可以了
此時浣熊跟小狐狸也在回家已經約好兩天後要一起去舞會現場
https://ithelp.ithome.com.tw/upload/images/20210919/20131155fZXkda3DpB.jpg
圖片來源
在回家的分岔路上分道揚鑣
就當浣熊Rocky回到家說我回來了
家裡卻沒有人應門
https://ithelp.ithome.com.tw/upload/images/20210919/20131155LzxGn0Z84l.jpg
圖片來源
待續..

動物園派對

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

../app//gemfile.rb

gem 'vite_rails'

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

$ bundle
$ bundle exec vite install

這個指令會幫我們跑 vitevite-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到專案中了

參考資料:

  1. vite-ruby

阿虎每日選幣

https://ithelp.ithome.com.tw/upload/images/20210919/20131155sESAUGYxFD.png

守 $0.1

天黑請閉眼


上一篇
[第四隻羊] 迷霧森林建築工事 III 透過Jumpstarter建立新專案
下一篇
[第六隻羊] 迷霧森林建築工事 V 哈囉世界安安vue
系列文
透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計30

尚未有邦友留言

立即登入留言