項目名稱 前端系統（基于 Vue2 技術棧） 技術棧核心 Vue2 + Ant Design Vue + Sass 版本號 V1.0.0 技術棧核心 Vue2 + Ant Design Vue + Sass 編制日期 2025-08-07
類別 技術選型 版本 作用說明 前端框架 Vue 2.6.x 頁面構建與數據驅動核心 UI 組件庫 Ant Design 1.7.x 提供企業級 UI 組件與交互能力 樣式預處理器 Sass/SCSS 2.6.x 頁面構建與數據驅動核心 狀態管理 Vuex 3.6.x 全局狀態管理 路由管理 Vue Router 3.5.x 客戶端路由控制與頁面跳轉 網絡請求 Axios 0.27.x HTTP
工具類別 選型工具 版本 作用說明 構建工具 Webpack 4.46.x 模塊打包與資源編譯 包管理 npm/yarn 6.x+/1.22.x 依賴安裝與版本管理 代碼規范 ESLint + Prettier 8.x+ 代碼風格檢查與自動格式化 提交規范 husky + commitlint 7.x+ Git 提交信息校驗與規范控制
采用 “分層隔離” 設計思想，從用戶交互到數據處理逐層封裝，每層職責單一：
┌───────────────── 表現層（UI Layer） ─────────────────┐
│ 負責頁面渲染與用戶交互，包含頁面組件、業務組件、通用組件 │
├───────────────── 業務層（Service Layer） ──────────────┤
│ 處理核心業務邏輯，包含狀態管理、權限控制、業務服務 │
├───────────────── 數據層（Data Layer） ─────────────────┤
│ 負責數據獲取與處理，包含API請求、數據轉換、本地存儲 │
└───────────────── 基礎設施層（Infra Layer） ─────────────┘
│ 提供通用能力支撐，包含工具函數、全局配置、自定義指令等 │
層級 核心職責 包含模塊 表現層 頁面展示、用戶交互、組件復用 Pages（頁面）、Components（組件） 業務層 業務規則實現、狀態流轉、權限校驗 Vuex（狀態）、Permission（權限） 數據層 接口調用、數據格式轉換、本地緩存 Api（接口）、Storage（存儲） 基礎設施層 通用工具、全局配置、跨層級能力支撐 Utils（工具）、Config（配置）
按分層架構設計目錄，確保文件路徑可預測、功能可定位：
src/
├── api/ # 數據層：接口定義與請求封裝
│ ├── module1/ # 按業務模塊劃分（如user、order）
│ └── index.js # 接口出口
├── assets/ # 靜態資源（圖片、字體、icon）
├── components/ # 表現層：共享組件
│ ├── business/ # 業務組件（如OrderTable、UserForm）
│ └── common/ # 通用組件（如Loading、Empty）
├── config/ # 基礎設施層：全局配置
│ ├── env.js # 環境變量（開發/測試/生產）
│ └── theme.js # 主題配置
├── layouts/ # 表現層：布局組件（如MainLayout、BlankLayout）
├── pages/ # 表現層：頁面組件（路由對應頁面）
│ ├── user/ # 按業務模塊劃分
│ └── dashboard/
├── router/ # 路由配置
│ ├── index.js # 路由入口
│ ├── routes.js # 路由規則
│ └── guard.js # 路由守衛（權限控制）
├── store/ # 狀態管理（Vuex）
│ ├── index.js # store入口
│ └── modules/ # 按模塊劃分的狀態（如user、app）
├── styles/ # 樣式資源（Sass）
│ ├── variables.scss # 全局變量（顏色、尺寸等）
│ ├── mixins.scss # 混合宏（通用樣式邏輯）
│ └── global.scss # 全局樣式
├── utils/ # 基礎設施層：工具函數
│ ├── auth.js # 權限相關工具
│ ├── format.js # 數據格式化工具
│ └── validator.js # 校驗工具
├── directives/ # 自定義指令（如權限指令v-permission）
├── filters/ # 過濾器（如日期格式化）
└── main.js # 應用入口文件
請求攔截：統一添加 Token、設置請求頭等 響應攔截：統一處理錯誤（如 401 未授權、500 服務器錯誤）、提取有效數據 接口管理：按業務模塊拆分 API，示例：
import request from '@/utils/request'
export function getUserInfo ( id ) { return request ( { url: ` /user/ ${ id} ` , method: 'get' } )
}
模塊化設計：每個業務模塊對應一個 Vuex 模塊，避免狀態混亂 狀態持久化：使用vuex-persistedstate保存關鍵狀態（如用戶信息）到 localStorage 示例結構：
const state = { userInfo: null , token: ''
}
const mutations = { setToken ( state, token ) { state. token = token}
}
const actions = { login ( { commit } , data) { return new Promise ( ( resolve ) => { api. login ( data) . then ( res => { commit ( 'setToken' , res. token) resolve ( res) } ) } ) }
}
export default { namespaced: true , state, mutations, actions }
動態路由：根據用戶權限動態生成可訪問路由 路由懶加載：減少首屏加載資源，示例：
const routes = [ { path: '/user' , component : ( ) => import ( '@/layouts/MainLayout' ) , children: [ { path: 'list' , component : ( ) => import ( '@/pages/user/list' ) } ] }
]
變量管理：統一維護主題色、字體、尺寸等變量（variables.scss） 混合宏封裝：復用通用樣式邏輯（如清除浮動、響應式適配） BEM 命名規范：避免樣式沖突，示例：block__element–modifier ESLint 規則：基于eslint-config-vue擴展，禁止未定義變量、強制縮進等 提交規范：通過commitlint約束提交信息格式（如feat: 新增用戶列表） 組件規范：單文件組件（SFC）按、 按需加載：Antd 組件按需引入（配合babel-plugin-import） 資源壓縮：圖片、JS、CSS 自動壓縮 緩存策略：靜態資源添加 hash 值，實現長效緩存 首屏加載：路由懶加載 + 關鍵 CSS 內聯 運行時：使用keep-alive緩存頻繁切換組件 渲染：避免v-for與v-if同時使用，減少 DOM 操作 XSS 防護：輸入內容過濾、輸出編碼 CSRF 防護：請求攜帶 Token 驗證 接口安全：超時控制、異常重試機制 RBAC 模型：基于角色的訪問控制（角色→權限→資源） 粒度控制：
路由級：無權限頁面禁止訪問 按鈕級：通過v-permission指令控制按鈕顯示 國際化：使用vue-i18n支持多語言切換 響應式：適配 PC 端不同屏幕尺寸（1280px+、1920px+） 兼容性：支持 Chrome 70+、Edge 80+、Firefox 65+ 版本號 日期 變更內容 負責人
模式）)
