enjoylyingflat的部落格

最近課程都上BS5，跟不上課程，所以翹課!就我個人的認知，BS5 就是一個可以快速套用的樣式工具。我認為應該在有需求時再去找相關的樣式表，而不是一開始就記住用法。當然，過程中可能會遇到一些問題，例如英語上的理解困難，或者在實際使用，還是沒成功套用。但我覺得如果能多次使用，特別是在常用的情況下，比起單純地演練，可能會更快上手並熟悉這些功能。

在快速瀏覽並了解 BS5 的功能與實際應用之後，我開始思考這個小專題到底要如何實作。坦白說，我的擔心點其實非常多。但是後來我想，這些擔憂其實很正常。現代開發為了節省時間，需要將許多模組、功能和程式語言結合在一起，這本來就需要一定的思考與實作過程才能知道組合後的結果如何。

在這個過程中，我接觸到一個新名詞——Design System（系統設計）。雖然我不確定現階段是否需要學習它，但我覺得這是一個非常重要的概念。因為如果我能對整個網站有一個清楚的認知，就能更清楚自己需要哪些功能、開發方向，以及想要呈現的效果。而這些能幫助我找到最簡單、直接的實現方式。更重要的是，這樣可以避免在後續實作中發現方向錯誤，導致需要推翻重來的情況。

在一開始的實作過程中，我遇到了一些問題，特別是在安裝 Node.js 的時候。安裝過程中有一些額外的選項需要處理，但我在安裝時碰到了問題，可能是網路或伺服器的原因，導致一些額外的模組或功能沒有成功下載。為了解決這個問題，我只好將所有相關內容完全解除安裝，然後重新安裝了一次。

P.S 原本周末要好好看影片，但老妹難得回家，與她聊天、吃飯、煮菜、躺平，時間就不見了XD，下禮拜再努力吧!

關鍵字 : Node.js、Vite、BS5

實作過程

我在一個資料夾中執行了 npm init 和 npm install vite，希望能夠建立一個基本的開發環境，但發現這樣操作僅僅是安裝了 Vite，之後，嘗試使用 npm create vite@latest 指令來初始化專案，並使用 npm create vite@latest . 指令直接在當前資料夾生成完整的專案結構。

完成專案初始化後，我成功啟動了 Vite 的開發伺服器，看到預設畫面，但隨後開始考慮如何整合 Bootstrap 5 的樣式到專案中。他給我妝最新的 5.3，但我課堂是上 Bootstrap 5.2 。所以把modules全刪掉，後面 npm install bootstrap@5.2.3 再安裝 Bootstrap。

來看看現在資料夾內的規劃

• node_modules/：
  • 包含所有安裝的依賴，例如 bootstrap。
  • 不要直接手動改動裡面的內容。
• public/：
  • 用於存放靜態檔案，例如圖片、圖示、字型等。
  • 所有放在 public/ 的檔案會被直接輸出到專案的根目錄（例如 /images/logo.png 可以直接在 HTML 中引用）。
• src/：
  • 主要的開發目錄，包含你的 SASS、JS、其他組件等。
  • 這裡應該包含你的自定義 SASS 檔案，例如 custom.scss，以及主入口檔案（如 main.js）。
• index.html：
  • 網頁的主要結構檔案，這裡負責引用你的編譯後的 CSS 和 JS。
• package.json：
  • 定義專案的依賴清單與腳本命令（如 npm run dev）。
  • 你可以在這裡指定 Bootstrap 的版本。