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

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

文档信息

1. 技术栈选型

1.1 核心技术框架

1.2 工程化工具

2. 架构分层设计

2.1 整体架构分层

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

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

2.2 分层职责详情

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') }
    ]
  }
]

• 路由守卫：实现页面跳转权限校验、登录状态检查

4.4 样式方案（Sass）

• 变量管理：统一维护主题色、字体、尺寸等变量（variables.scss）
• 混合宏封装：复用通用样式逻辑（如清除浮动、响应式适配）
• BEM 命名规范：避免样式冲突，示例：block__element–modifier

5. 工程化与质量保障

5.1 代码规范

• ESLint 规则：基于eslint-config-vue扩展，禁止未定义变量、强制缩进等
• 提交规范：通过commitlint约束提交信息格式（如feat: 新增用户列表）
• 组件规范：单文件组件（SFC）按、

5.2 构建优化

• 按需加载：Antd 组件按需引入（配合babel-plugin-import）
• 资源压缩：图片、JS、CSS 自动压缩
• 缓存策略：静态资源添加 hash 值，实现长效缓存

5.3 性能优化

• 首屏加载：路由懒加载 + 关键 CSS 内联
• 运行时：使用keep-alive缓存频繁切换组件
• 渲染：避免v-for与v-if同时使用，减少 DOM 操作

6. 安全与权限

6.1 安全防护

• XSS 防护：输入内容过滤、输出编码
• CSRF 防护：请求携带 Token 验证
• 接口安全：超时控制、异常重试机制

6.2 权限控制

• RBAC 模型：基于角色的访问控制（角色→权限→资源）
• 粒度控制：
  • 路由级：无权限页面禁止访问
  • 按钮级：通过v-permission指令控制按钮显示

7. 扩展与兼容

• 国际化：使用vue-i18n支持多语言切换
• 响应式：适配 PC 端不同屏幕尺寸（1280px+、1920px+）
• 兼容性：支持 Chrome 70+、Edge 80+、Firefox 65+

8. 版本历史

版本号 日期 变更内容 负责人
V1.0.0 2025-08-07 初始版本，完成架构设计文档 开发者