AI-Builder Frontend

基于 Vue3 + Vite 的前端应用

技术栈

• 框架: Vue 3
• 构建工具: Vite
• UI组件库: Element Plus
• 路由: Vue Router 4
• 状态管理: Pinia
• HTTP客户端: Axios
• 表格组件: VXE Table
• 代码编辑器: Monaco Editor
• Excel处理: XLSX
• 工具库: XE Utils

目录结构

frontend/
├── src/
│   ├── api/              # API接口管理
│   │   ├── index.js      # API统一导出
│   │   └── request.js    # Axios请求封装
│   ├── assets/           # 静态资源
│   ├── components/       # 通用组件
│   │   └── common/       # 公共组件
│   │       ├── TableView.vue    # 表格视图组件
│   │       └── CodeEditor.vue   # 代码编辑器组件
│   ├── composables/      # 组合式函数
│   │   ├── useTable.js          # 表格通用逻辑
│   │   └── useMonacoEditor.js   # 编辑器通用逻辑
│   ├── router/           # 路由配置
│   │   └── index.js
│   ├── store/            # 状态管理
│   │   └── index.js
│   ├── styles/           # 全局样式
│   │   └── index.css
│   ├── utils/            # 工具函数
│   │   ├── index.js      # 通用工具
│   │   └── excel.js      # Excel工具
│   ├── views/            # 页面视图
│   │   ├── Home.vue
│   │   └── Dashboard/
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── public/               # 公共资源
├── index.html            # HTML模板
├── vite.config.js        # Vite配置
├── package.json          # 项目依赖
└── .env                  # 环境变量

快速开始

安装依赖

npm install

开发模式

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build

预览生产构建

npm run preview

功能特性

1. UI组件库 (Element Plus)

• 企业级UI组件库
• 完整的中文文档
• 丰富的组件生态
• 支持按需引入

2. 状态管理 (Pinia)

• 模块化的状态管理
• 支持TypeScript类型推断
• 开箱即用的DevTools支持

3. 表格功能 (VXE Table)

• 强大的数据表格功能
• 支持虚拟滚动
• 丰富的配置选项

4. 代码编辑器 (Monaco Editor)

• VS Code同款编辑器
• 语法高亮
• 代码补全

5. Excel处理 (XLSX)

• Excel文件导入导出
• 数据格式转换

开发规范

• 使用 Vue 3 Composition API
• 遵循 ESLint 代码规范
• 组件命名采用PascalCase
• 文件夹命名采用kebab-case

项目特点

• ✅ 功能模块清晰分离
• ✅ 组合式函数复用逻辑
• ✅ 统一的API管理
• ✅ 完善的工具函数库
• ✅ 响应式状态管理