問 ChatGPT 3.5 建議的前端專案架構

@Johannes Plenio

目錄結構

/src
  /assets               # 存放圖片、樣式表等靜態資源
  /components           # 可重用的Vue元件
  /views                # 每個頁面對應的Vue視圖組件
  /services             # 與後端交互的服務層，如API呼叫
  /utils                # 共用的工具函數
  App.vue               # 根組件
  main.js               # Vue應用入口點

詳細說明

• assets: 包含圖片、字體、全域樣式表等靜態資源。
• components: 存放可重用的Vue元件，可以根據功能或共用性進一步分組。
• views: 每個頁面對應的Vue視圖組件，通常以路由為基礎組織。
• services: 用於與後端API交互的服務層，包括所有的API呼叫和相關的邏輯。
• utils: 存放共用的工具函數，例如日期格式化、驗證等。

其他建議

• 路由管理: 使用Vue Router來管理應用的路由。可以根據需要設置巢狀路由，讓應用更有組織性。
• 狀態管理: 使用Vuex來管理應用的狀態。將共享的狀態集中管理，方便跨組件共享數據。
• 模組化設計: 將代碼切分為小模組，每個模組應該負責特定功能，並確保模組之間的疊代關係清晰。
• 命名規範: 使用一致的命名規範，確保代碼易讀且容易理解。這也包括組件、變數、路由等命名。
• 測試: 實施單元測試和集成測試以確保代碼的穩定性和可靠性。

• 代碼註釋: 使用清晰的註釋，解釋代碼的目的和邏輯，有助於新成員快速了解代碼。

展開說明

1. /assets

• 圖片: 存放應用中使用的圖片，例如Logo、背景圖等。
• 樣式表: 放置全域的CSS樣式、Sass、Less等文件。這裡可以有一個styles目錄，包含多個樣式文件或文件夾，根據需求區分。

2. /components

這個目錄用於存放可重用的Vue元件，可依據功能或共用性進一步分組

• UI元件: 包含按鈕、表單輸入、卡片等可重複使用的基本UI元件。
• 布局元件: 例如樣式化的佈局容器、網格系統等。
• 功能性元件: 處理特定功能的元件，例如購物車、用戶註冊等。

3. /views

每個頁面對應的Vue視圖組件應該放置在這個目錄下，通常以路由為基礎組織

• 首頁: 可能是應用的進入點。
• 用戶頁面: 包含用戶註冊、登入等相關頁面。
• 產品頁面: 如果是電子商務類型的應用，可能會有產品列表、產品詳情等頁面。

4. /services

這個目錄用於處理與後端API交互的服務層，包括所有的API呼叫和相關的邏輯

• API呼叫: 存放與後端通信的API呼叫函數。
• 資料處理: 如需要對從後端獲取的資料進行處理，可以在這裡進行。

5. /utils

存放共用的工具函數，例如日期格式化、驗證等。這裡可能包括一些通用的功能性輔助程式碼

• 日期處理: 包含日期格式化、時間計算等功能。
• 驗證: 可能包括表單驗證、輸入驗證等工具函數。

總結來說

我覺得整體架構來說是好的，至少方向很明確，但是主要還是需要評估專案的基底，像是用Quasar或是Nuxt.js之類的，這些方便的CLI工具都有可能會影響資料夾結構。以及專案複雜程度不同可能會需要再往下分類會更好，這裡沒有提到套件的整理方式建議是另外開一個資料夾plugin去做整理，也是不錯的選擇。

可以先掌握基本的規則，像是命名規範、註解以及Code Style Auto統一，再來就是使用函式的方式與規定，才不會有人從A地方傳入有人從B地方傳入的情況發生，每個人風格不同，但不要偏離易維護性就可以。

另外，他提到的VueX已經是Vue2的產物，現在Vue2已經不更新了，這個部分還需要注意一下！現在Vue3的組合式API能夠跨組件溝通用法也相當簡單，只是狀態管理的部分仍須考慮專案複雜性決定是否有必要引入管理方法。

以上就是今天分享拉，疑問或有誤歡迎留言～！