轉載說明：原創不易，未經授權，謝絕任何形式的轉載
Midjourney 創作，檔案夾
在開發Web應用程式時建立可維護的檔案夾結構非常重要，正确的檔案放在正确的檔案夾中有助于組織您的代碼，并讓其他開發人員了解您的Web應用程式的架構是什麼樣子的，或者将在開發過程中變成什麼樣子。在這篇文章中，我将解釋一些在建構現代Web項目時使用的檔案夾名稱。
維護一個良好組織的檔案夾結構對于開發Web應用程式非常重要，即使在獨自工作或擁有有限資源時，這可能不是您首先考慮的事情。如果不這樣做，您會冒着顯得不專業的風險。
以下是設計您的檔案夾結構的一些提示：
- 了解您的Web項目的目的：為了找出如何組織您的Web項目，您需要建立一個良好的了解，根據您正在嘗試組織的資産數量和Web應用程式中的功能。
- 為您的檔案夾和檔案使用适當的命名約定，它們應該描述您的Web應用程式中的目的。
檔案夾結構及其解釋
資産（Assets）
資産檔案夾包含您的Web應用程式中将使用的所有圖像、圖示、CSS檔案、字型檔案等。自定義圖像、圖示、付費字型都放在這個檔案夾中。
上下文（Context）
當使用React Js作為您首選的前端UI庫時，上下文檔案夾存儲所有React上下文檔案，這些檔案在元件和多個頁面中使用。
延伸閱讀：什麼是上下文檔案？
上下文檔案通常指在程式設計中使用的上下文對象，例如在React應用程式中使用的上下文對象，用于在元件之間共享資料。上下文檔案通常定義了一個上下文對象，其中包含可以在元件中共享的資料和方法。這些上下文對象可以使元件之間更容易地共享資料，而無需将資料一層層地傳遞到嵌套的元件中。
元件（Components）
元件檔案夾儲存您的應用程式的UI。它包含所有UI元件，如導航欄、頁腳、按鈕、模态框、卡片等。
可組合（Composables）
在Vue應用程式的上下文中，“可組合”是一個函數，利用Vue的組合API來封裝和重用有狀态的邏輯。
資料（Data）
資料檔案夾用于存儲文本資料，這些資料将作為JSON檔案在不同的部分和頁面中使用。這樣做将使更新資訊變得更容易。
特性（Features）
該檔案夾包含每個頁面的單獨特性檔案夾（如身份驗證、主題、模态框）。例如，每個頁面可能都有一個模态框特性。
鈎子（Hooks）
鈎子是允許您從函數元件中“挂鈎”React狀态和生命周期特性的函數。我們也可以建立自定義鈎子，其名稱以'use'開頭，并可用于調用其他鈎子。
布局（Layouts）
當定義網頁的一般外觀和感覺時，布局檔案夾非常有用。它用于放置基于布局的元件，例如側邊欄、導航欄和頁腳。如果您的Web應用程式有許多布局，則此檔案夾是儲存它們的好地方。
子產品（Modules）
子產品檔案夾處理應用程式中的特定任務。
頁面（Pages）
頁面目錄包含您的Web應用程式視圖。像Next Js和Nuxt Js這樣的前端架構中的頁面目錄會讀取目錄中的所有檔案，并自動為您建立路由配置。
公共（Public）
公共目錄直接在伺服器根目錄下提供服務，包含不會更改的公共檔案，例如favicon.ico。
路由（Routes）
路由檔案夾是您的Web應用程式中存儲到不同螢幕的路由路徑的位置。
實用程式（Utility/Utils）
這個檔案夾用于存儲所有實用函數，例如auth、theme、handleApiError等。
視圖（Views）
視圖檔案夾就像頁面檔案夾一樣，用于正确表示您的頁面，以便使用者可以前後導航。
結論
一個良好的檔案夾結構可以讓您和其他開發人員更快地找到檔案并更輕松地管理它們。一個組織良好的檔案夾結構可以讓您看起來更專業。
今天的分享就到這裡，感謝你的閱讀，希望能夠幫助到你，文章創作不易，如果你喜歡我的分享，别忘了點贊轉發，讓更多有需要的人看到，最後别忘記關注「前端達人」，你的支援将是我分享最大的動力，後續我會持續輸出更多内容，敬請期待。
原文：https://dev.to/noruwa/folder-structure-for-modern-web-applications-4d11
作者：Obaseki Noruwa
非直接翻譯，有自行改編和添加部分，翻譯水準有限，難免有疏漏，歡迎指正