前端框架Vben Admin目录结构,如何管理配置API
Vben Admin是一个基于 Vue3.0、Vite、 TypeScript 的中后台解决方案，目前更新到5.0版本，跟旧版本不兼容。这是他的官网：Vben Admin。
关键目录说明：
1. 项目根目录
-
/：项目根目录，包含项目的入口文件、配置文件、依赖文件等。-
package.json：定义项目的依赖、脚本和配置信息。 -
vite.config.ts：Vite 的配置文件，用于定义开发服务器、构建工具等。 -
.env.*：环境变量配置文件，用于定义不同环境下的配置，如开发环境、生产环境等。
-
2. 源代码目录
-
src/：项目的源代码目录，包含所有前端代码。-
/api：存放所有与后端接口相关的请求代码，通常按模块划分。-
user.ts：用户相关的 API 请求。 -
dashboard.ts：仪表盘相关的 API 请求。 -
system/：系统管理相关的 API 请求，如菜单、角色、用户等。
-
-
/assets：存放静态资源，如图片、样式文件等。 -
/components：自定义组件的存放目录。-
BasicUpload.vue：文件上传组件。 -
BasicTable.vue：表格组件。
-
-
/layouts：页面布局相关的组件，如顶部导航栏、侧边栏等。-
BasicLayout.vue：基本布局组件。
-
-
/router：路由配置目录。-
index.ts：路由的入口文件，定义全局路由配置。 -
modules/：按模块划分的路由配置文件。
-
-
/store：状态管理目录，使用 Pinia 或 Vuex。-
index.ts：状态管理的入口文件。 -
modules/：按模块划分的状态管理文件。
-
-
/utils：工具函数目录，存放常用的工具函数。-
http/axios.ts：封装的 HTTP 请求工具。 -
helper.ts：通用的辅助函数。
-
-
/views：页面组件目录，存放所有的页面组件。-
Dashboard.vue：仪表盘页面。 -
UserManage.vue：用户管理页面。
-
-
/hooks：自定义的 Vue 钩子函数。-
useTable.ts：用于表格操作的自定义钩子。
-
-
/types：自定义的 TypeScript 类型定义文件。-
global.d.ts：全局类型定义。
-
-
/mock：Mock 数据目录，用于开发环境中的模拟数据。-
index.ts：Mock 数据的入口文件。 -
modules/：按模块划分的 Mock 数据文件。
-
-
/locales：国际化语言包目录。-
en-US.ts：英文语言包。 -
zh-CN.ts：中文语言包。
-
-
/styles：全局样式文件目录。-
index.less：全局样式文件。
-
-
/theme：主题配置目录。-
index.ts：主题配置文件。
-
-
/config：项目配置目录。-
index.ts：项目全局配置文件。
-
-
/entry：项目入口文件。-
main.ts：项目的主入口文件，用于初始化 Vue 应用。
-
-
/permission：权限管理目录。-
index.ts：权限管理的入口文件。
-
-
/theme：主题配置目录。-
index.ts：主题配置文件。
-
-
3. 其他目录
-
public/：存放公共静态资源，如favicon.ico、manifest.json等。 -
tests/：存放测试代码，如单元测试、端到端测试等。 -
docs/：存放项目文档，如开发指南、API 文档等。 -
dist/：项目构建后的输出目录，包含生产环境的静态资源。 -
node_modules/：存放项目依赖的第三方库。
4. 配置文件
-
.env.development：开发环境的配置文件。 -
.env.production：生产环境的配置文件。 -
.eslintrc.js：ESLint 配置文件，用于代码规范检查。 -
.prettierrc.js：Prettier 配置文件，用于代码格式化。 -
.browserslistrc：浏览器兼容性配置文件。
5. 工具脚本
-
scripts/：存放项目相关的脚本文件，如自动化脚本、构建脚本等。
项目根目录
├── src/ # 源代码目录
│ ├── api/ # API 请求相关代码
│ │ ├── user.ts # 用户相关的 API 请求
│ │ ├── dashboard.ts # 仪表盘相关的 API 请求
│ │ └── system/ # 系统管理相关的 API 请求
│ │ ├── menu.ts # 菜单管理 API
│ │ ├── role.ts # 角色管理 API
│ │ └── user.ts # 系统用户管理 API
│ ├── assets/ # 静态资源目录
│ │ ├── images/ # 图片资源
│ │ └── styles/ # 样式文件
│ ├── components/ # 自定义组件目录
│ │ ├── BasicUpload.vue # 文件上传组件
│ │ └── BasicTable.vue # 表格组件
│ ├── layouts/ # 页面布局组件
│ │ └── BasicLayout.vue # 基本布局组件
│ ├── router/ # 路由配置目录
│ │ ├── index.ts # 路由入口文件
│ │ └── modules/ # 按模块划分的路由配置
│ ├── store/ # 状态管理目录
│ │ ├── index.ts # 状态管理入口文件
│ │ └── modules/ # 按模块划分的状态管理
│ ├── utils/ # 工具函数目录
│ │ ├── http/axios.ts # 封装的 HTTP 请求工具
│ │ └── helper.ts # 通用辅助函数
│ ├── views/ # 页面组件目录
│ │ ├── Dashboard.vue # 仪表盘页面
│ │ └── UserManage.vue # 用户管理页面
│ ├── hooks/ # 自定义 Vue 钩子函数
│ │ └── useTable.ts # 表格操作的自定义钩子
│ ├── types/ # TypeScript 类型定义
│ │ └── global.d.ts # 全局类型定义
│ ├── mock/ # Mock 数据目录
│ │ ├── index.ts # Mock 数据入口文件
│ │ └── modules/ # 按模块划分的 Mock 数据
│ ├── locales/ # 国际化语言包目录
│ │ ├── en-US.ts # 英文语言包
│ │ └── zh-CN.ts # 中文语言包
│ ├── styles/ # 全局样式文件目录
│ │ └── index.less # 全局样式文件
│ ├── theme/ # 主题配置目录
│ │ └── index.ts # 主题配置文件
│ ├── config/ # 项目配置目录
│ │ └── index.ts # 项目全局配置文件
│ ├── entry/ # 项目入口文件
│ │ └── main.ts # Vue 应用的主入口文件
│ └── permission/ # 权限管理目录
│ └── index.ts # 权限管理入口文件
├── public/ # 公共静态资源目录
│ ├── favicon.ico # 网站图标
│ └── manifest.json # 应用配置文件
├── tests/ # 测试代码目录
├── docs/ # 项目文档目录
├── dist/ # 构建输出目录
├── node_modules/ # 项目依赖目录
├── package.json # 项目依赖和脚本配置
├── vite.config.ts # Vite 配置文件
├── .env.development # 开发环境配置文件
├── .env.production # 生产环境配置文件
├── .eslintrc.js # ESLint 配置文件
├── .prettierrc.js # Prettier 配置文件
└── .browserslistrc # 浏览器兼容性配置文件
在 Vben Admin 中，如果需要在自定义组件中连接多个 API，建议将这些 API 的调用逻辑集中管理，而不是分散在组件内部。这样可以提高代码的可维护性和可复用性。以下是几种常见的管理方式：
1. 在 src/api 目录中集中管理 API
将所有相关的 API 请求封装到 src/api 目录下的模块文件中。
假设你有一个自定义组件 CustomComponent.vue，需要调用多个 API，比如获取用户信息、获取订单列表和更新订单状态。
a.在 src/api 目录中创建模块文件
src/api/
├── user.ts # 用户相关 API
├── order.ts # 订单相关 API
└── ...
b.封装 API 请求
// src/api/user.ts
import { defHttp } from '/@/utils/http/axios';
export function getUserInfo() {
return defHttp.request({
url: '/user/info',
method: 'GET',
});
}
// src/api/order.ts
import { defHttp } from '/@/utils/http/axios';
export function getOrderList() {
return defHttp.request({
url: '/order/list',
method: 'GET',
});
}
export function updateOrderStatus(orderId: string, status: string) {
return defHttp.request({
url: `/order/${orderId}/status`,
method: 'PUT',
data: { status },
});
}c.在组件中使用
User Info
{{ userInfo.name }}
Orders
- {{ order.name }}
2. 使用 Composition API 组合逻辑
如果组件中需要调用多个 API，并且这些 API 调用之间存在逻辑关系，可以使用 Vue 的 Composition API 来组合这些逻辑。
User Info
{{ userInfo.name }}
Orders
- {{ order.name }}
3. 使用自定义 Hook
如果多个组件需要共享相同的 API 逻辑，可以将这些逻辑封装到自定义 Hook 中。
a.创建自定义 Hook
// src/hooks/useUserAndOrders.ts
import { ref } from 'vue';
import { getUserInfo } from '/@/api/user';
import { getOrderList } from '/@/api/order';
export function useUserAndOrders() {
const userInfo = ref(null);
const orders = ref([]);
const fetchUserInfo = async () => {
userInfo.value = await getUserInfo();
};
const fetchOrders = async () => {
orders.value = await getOrderList();
};
const loadAll = async () => {
await fetchUserInfo();
await fetchOrders();
};
return { userInfo, orders, loadAll };
}b.在组件中使用
User Info
{{ userInfo.name }}
Orders
- {{ order.name }}
4. 使用 Vuex 或 Pinia 进行状态管理
如果 API 调用的结果需要在多个组件之间共享，可以使用 Vuex 或 Pinia 来管理这些状态。
a.创建 Pinia Store
// src/store/modules/user.ts
import { defineStore } from 'pinia';
import { getUserInfo } from '/@/api/user';
export const useUserStore = defineStore('user', {
state: () => ({
userInfo: null,
}),
actions: {
async fetchUserInfo() {
this.userInfo = await getUserInfo();
},
},
});
// src/store/modules/orders.ts
import { defineStore } from 'pinia';
import { getOrderList } from '/@/api/order';
export const useOrdersStore = defineStore('orders', {
state: () => ({
orders: [],
}),
actions: {
async fetchOrders() {
this.orders = await getOrderList();
},
},
});b.在组件中使用
User Info
{{ userInfo.name }}
Orders
- {{ order.name }}
注：
- Monorepo 是一种软件开发策略，全称为 Monolithic Repository，即“单一仓库”。它指的是将多个项目或模块的代码集中存放在一个版本控制仓库中，这些项目虽然在逻辑上可能是独立的，但它们通常相互关联，并由不同的团队维护。
- Node.js 的 subpath imports 是一种模块导入机制，它允许开发者通过在
package.json文件中定义路径别名来简化模块的导入路径。