当前位置：首页 > news >正文

前端技术架构设计文档（Vue2+Antd+Sass）

news 2025/8/8 6:01:50

前端技术架构设计文档（Vue2+Antd+Sass）

文档信息

项目名称	前端系统（基于 Vue2 技术栈）
技术栈核心	Vue2 + Ant Design Vue + Sass
版本号	V1.0.0
技术栈核心	Vue2 + Ant Design Vue + Sass
编制日期	2025-08-07

1. 技术栈选型

1.1 核心技术框架

类别	技术选型	版本	作用说明
前端框架	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

1.2 工程化工具

工具类别	选型工具	版本	作用说明
构建工具	Webpack	4.46.x	模块打包与资源编译
包管理	npm/yarn	6.x+/1.22.x	依赖安装与版本管理
代码规范	ESLint + Prettier	8.x+	代码风格检查与自动格式化
提交规范	husky + commitlint	7.x+	Git 提交信息校验与规范控制

2. 架构分层设计

2.1 整体架构分层

采用 “分层隔离” 设计思想，从用户交互到数据处理逐层封装，每层职责单一：

┌───────────────── 表现层（UI Layer） ─────────────────┐
│ 负责页面渲染与用户交互，包含页面组件、业务组件、通用组件  │
├───────────────── 业务层（Service Layer） ──────────────┤
│ 处理核心业务逻辑，包含状态管理、权限控制、业务服务        │
├───────────────── 数据层（Data Layer） ─────────────────┤
│ 负责数据获取与处理，包含API请求、数据转换、本地存储      │
└───────────────── 基础设施层（Infra Layer） ─────────────┘
│ 提供通用能力支撑，包含工具函数、全局配置、自定义指令等    │

2.2 分层职责详情

层级	核心职责	包含模块
表现层	页面展示、用户交互、组件复用	Pages（页面）、Components（组件）
业务层	业务规则实现、状态流转、权限校验	Vuex（状态）、Permission（权限）
数据层	接口调用、数据格式转换、本地缓存	Api（接口）、Storage（存储）
基础设施层	通用工具、全局配置、跨层级能力支撑	Utils（工具）、Config（配置）

3. 目录结构规范

按分层架构设计目录，确保文件路径可预测、功能可定位：

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               # 应用入口文件

4. 核心技术实现

4.1 网络请求（Axios 封装）

请求拦截：统一添加 Token、设置请求头等
响应拦截：统一处理错误（如 401 未授权、500 服务器错误）、提取有效数据
接口管理：按业务模块拆分 API，示例：

// src/api/user.js
import request from '@/utils/request'
export function getUserInfo(id) {return request({url: `/user/${id}`,method: 'get'})
}

4.2 状态管理（Vuex）

模块化设计：每个业务模块对应一个 Vuex 模块，避免状态混乱
状态持久化：使用vuex-persistedstate保存关键状态（如用户信息）到 localStorage
示例结构：

// src/store/modules/user.js
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 }

4.3 路由管理（Vue Router）

动态路由：根据用户权限动态生成可访问路由
路由懒加载：减少首屏加载资源，示例：

// src/router/routes.js
const routes = [{path: '/user',component: () => import('@/layouts/MainLayout'),children: [{ path: 'list', component: () => import('@/pages/user/list') }]}
]