项目结构

了解项目的目录结构和各个文件的用途，有助于你更好地开发和维护项目。


目录结构

zap-admin-vue3/
├── public/               # 静态资源目录
├── src/                  # 源代码目录
│   ├── api/             # API 接口定义
│   ├── assets/          # 项目资源文件
│   ├── components/      # 公共组件
│   ├── composables/     # 组合式函数
│   ├── layouts/         # 布局组件
│   ├── router/          # 路由配置
│   ├── stores/          # Pinia 状态管理
│   ├── styles/          # 全局样式
│   ├── utils/           # 工具函数
│   ├── views/           # 页面组件
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── .env                 # 环境变量
├── .eslintrc.js         # ESLint 配置
├── .gitignore          # Git 忽略文件
├── index.html          # HTML 模板
├── package.json        # 项目配置
├── README.md           # 项目说明
├── tsconfig.json       # TypeScript 配置
└── vite.config.js      # Vite 配置

核心目录说明

src/api

存放所有API接口定义，按模块划分：

  • api/user.js - 用户相关接口
  • api/system.js - 系统管理接口
  • api/config.js - API配置文件

src/components

存放可复用的组件，建议按功能模块划分：

  • components/common/ - 通用组件
  • components/form/ - 表单相关组件
  • components/table/ - 表格相关组件

src/composables

Vue3组合式函数（Composables）目录：

  • useAuth.js - 认证相关逻辑
  • usePermission.js - 权限控制逻辑
  • useTable.js - 表格通用逻辑

src/router

路由配置目录：

  • index.js - 路由入口文件
  • routes/ - 模块化路由配置
  • guards.js - 路由守卫

src/stores

Pinia状态管理目录：

  • user.js - 用户状态管理
  • app.js - 应用全局状态
  • permission.js - 权限状态管理

配置文件说明

vite.config.js

Vite构建工具的配置文件，包含：

  • 插件配置
  • 构建选项
  • 开发服务器配置
  • 代理设置

tsconfig.json

TypeScript配置文件，定义了：

  • 编译选项
  • 类型检查规则
  • 模块解析配置

.env 文件

环境变量配置文件：

  • .env - 默认环境变量
  • .env.development - 开发环境变量
  • .env.production - 生产环境变量
下一步：路由配置