前端架构
本部分系统讲解「企业级低代码开发平台」前端的整体架构与核心实现。前端项目位于 frontend/，基于 Vue 3.5 + TypeScript + Vite 8 构建，集成了 Element Plus、Pinia、Vue Router、ECharts、bpmn-js、@form-create、vuedraggable、Tailwind 等技术栈，覆盖了从低代码设计器（表单 / 列表 / 页面 / 流程 / 报表）到运行时渲染、从系统管理到行业业务（ERP / HR）的完整能力。
章节索引
- —— 技术栈、Vite 自动导入与组件自动注册、路径别名、目录组织、本地启动
- —— 路由结构、动态路由、JWT 过期守卫、
requiresAuth、accessibleMenuPaths菜单白名单、运行时路由 - —— axios 封装、
baseURL /api、请求/响应拦截器解包Result、Token 注入、Vite 代理、双重/api前缀陷阱 - —— Pinia
store/user.ts：Token / 用户信息 / 租户 / 权限，localStorage 持久化 - —— ProTable / ProCard / QueryForm / DictSelect / StatusTag / ActionButton 等共享组件用法
- —— FormCreate 表单设计器、SimpleProcessDesignerV2 钉钉式流程设计器、BpmnDesigner、FormComponents 表单渲染库
技术栈速览
| 分类 | 技术 | 说明 |
|---|---|---|
| 框架 | Vue 3.5 + TypeScript | Composition API + <script setup> |
| 构建 | Vite 8 | 开发端口 3000，代理后端 52856 |
| UI | Element Plus 2.13 | 组件自动注册，中文语言包 |
| 状态 | Pinia 3 | store/user.ts 单 Store |
| 路由 | Vue Router 4 | History 模式 + 动态权限守卫 |
| 图表 | ECharts 6 | 仪表盘 / 图表设计器 |
| 流程 | bpmn-js 17 + 简易流程设计器 | 双流程设计模式 |
| 表单 | @form-create 3 | 表单设计器 + 表单渲染 |
| 拖拽 | vuedraggable + sortablejs | 设计器拖拽交互 |
| 样式 | Tailwind 3 + SCSS | 原子化 + 主题样式 |
阅读建议
初学者建议按顺序阅读「前端总览 → 路由与菜单 → 请求层 → 状态管理」，建立整体认知后再看「公共组件」与「设计器组件」。设计器部分是低代码平台的核心，涉及大量拖拽编排与配置 JSON 生成逻辑，需要重点理解。