vue技術架構介紹
- 如下圖所示，展示了項目系統的軟件層次架構。該系統采用基于SOA（面向服務架構）思想的分層架構，分為四個主要層次：視圖層、編譯層、代碼層和數據層。
視圖層
- 瀏覽器：核心職責是解析并展示Web資源。它接收來自服務器的網頁源文件，解析HTML、CSS和JavaScript，從而呈現給用戶一個交互式的界面。
- 業務模塊：針對不同的業務需求開發的一系列獨立模塊。這些模塊能夠靈活組合，支持快速迭代與功能擴展，滿足不同場景下的應用需求。
編譯層
- 構建工具：使用Webpack、vite等現代前端構建工具來分析項目的結構。通過識別入口文件，定位到所有必要的JavaScript模塊以及非瀏覽器直接支持的語言如TypeScript、SCSS等。然后，將這些源代碼轉換成瀏覽器可執行的形式，這個過程包括但不限于編譯、打包、壓縮等操作，以優化加載速度和性能。
代碼層
- 組件化設計：在Vue框架中，每一個頁面上的獨立可視或交互區域都被視為一個組件。每個組件都有自己的工程目錄，包含所需的模板、樣式和腳本，有利于代碼組織、維護和重用。
- 路由管理：使用vue-router定義應用程序的導航路徑，實現無縫的頁面切換體驗。
- 狀態管理：使用Vuex管理應用的所有組件狀態，實現狀態的集中化存儲和可預測性變化。
- UI組件庫：提供了豐富的預構建UI組件，簡化界面設計與開發流程，提高產品的統一性和用戶體驗。
- 工具函數：util文件夾存放通用功能函數，提高代碼復用率，減少重復勞動，同時提升項目的維護性。
數據層
- 服務層(Service)：專注于業務邏輯的設計與實現，確保業務模塊解耦合，增強代碼的可復用性和可測試性。
- 網絡請求(Network)：處理所有的HTTP請求，包括請求發送、響應接收以及異常處理，涉及緩存策略、超時設置等功能，保障數據傳輸的安全性和效率。
- API接口(Api)：通過Ajax等方式與后端通信，獲取所需數據，封裝與服務器交互的細節，提供簡潔易用的接口供前端調用。
)
