# vue3-admin-template

**Repository Path**: cometang/vue3admin-template

## Basic Information

- **Project Name**: vue3-admin-template
- **Description**: 纯净版adminvue3 管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-04
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 框架重构说明

重构已删除以下功能模块，简化了框架结构：

## 已删除的功能

### 1. Mock 数据模拟
- ✅ 删除 `src/mock/` 目录及相关文件
- ✅ 移除 mockjs 依赖引用
- ✅ 清理 mock 相关配置

### 2. 动态路由系统
- ✅ 删除 `src/routers/modules/dynamicRouter.js`
- ✅ 移除动态路由初始化逻辑
- ✅ 所有路由改为静态配置在 `src/routers/modules/staticRouter.js`

### 3. 权限管理系统（Auth）
- ✅ 删除 `src/stores/modules/auth.js`
- ✅ 移除按钮权限验证
- ✅ 移除菜单权限验证
- ✅ 清理权限相关工具函数

### 4. 自定义指令
- ✅ 移除所有自定义权限指令（v-auth, v-permission 等）

## 修改的文件

### 路由相关
- `src/routers/index.js` - 简化路由守卫，移除权限验证逻辑
- `src/routers/modules/staticRouter.js` - 添加首页静态路由配置

### 组件相关
- `src/layouts/LayoutVertical/index.vue` - 改用静态路由数据
- `src/layouts/LayoutClassic/index.vue` - 改用静态路由数据
- `src/layouts/LayoutColumns/index.vue` - 改用静态路由数据
- `src/layouts/LayoutTransverse/index.vue` - 改用静态路由数据
- `src/layouts/components/Header/components/Breadcrumb.vue` - 改用路由元信息生成面包屑
- `src/layouts/components/Header/components/SearchMenu.vue` - 改用静态路由数据
- `src/layouts/components/Tabs/index.vue` - 改用静态路由数据

### 工具函数
- `src/utils/util.js` - 删除 `setAuthMenuList` 权限控制函数

### 登录相关
- `src/views/login/components/LoginForm.vue` - 清理权限接口调用，留空待实现

## 如何添加新页面

现在添加新页面需要在静态路由中手动配置：

```javascript
// src/routers/modules/staticRouter.js
{
  path: "/layout",
  name: "layout",
  component: () => import("@/layouts/index.vue"),
  redirect: HOME_URL,
  children: [
    {
      path: "/home/index",
      name: "home",
      component: () => import("@/views/home/index.vue"),
      meta: {
        icon: "HomeFilled",
        title: "首页",
        isLink: "",
        isHide: false,
        isFull: false,
        isAffix: true,
        isKeepAlive: true
      }
    },
    // 在这里添加新的路由配置
    {
      path: "/your-page",
      name: "yourPage",
      component: () => import("@/views/your-page/index.vue"),
      meta: {
        icon: "Menu",
        title: "你的页面",
        isHide: false,
        isKeepAlive: true
      }
    }
  ]
}
```

## 与后台接口对接

API 接口调用位置已保留，可以在以下文件中实现：

1. **登录接口**: `src/views/login/components/LoginForm.vue` 的 `login` 方法
2. **其他接口**: 在 `src/api/` 目录下创建对应的接口文件

示例：
```javascript
// src/api/user.js
import http from "@/utils/service";

export const login = (params) => {
  return http.post("/api/login", params);
};
```

## 注意事项

1. 路由配置中的 `meta` 字段说明：
   - `icon`: 菜单图标（Element Plus 图标名称）
   - `title`: 菜单标题
   - `isHide`: 是否在菜单中隐藏
   - `isKeepAlive`: 是否缓存该页面
   - `isAffix`: 是否固定在 Tabs 中
   - `isFull`: 是否全屏显示
2. 所有组件功能已保持正常，只是数据源从动态改为静态
3. 可以根据需要自行实现后台接口的权限验证逻辑
4. 添加了一个默认的组件***分销管理***，位于`.\src\views\distribution`下，内容纯静态，仅供参考，删除需要同步删除`.\src\routers\modules\staticRouter.js`中以下代码块：

```js
,
{
    path: "/distribution/index",
    name: "distribution",
    component: () => import("@/views/distribution/index.vue"),
    id: "d",
    parentId: null,
    title: "分销管理",
    disable: false, // 原数据缺失，补充默认值
    meta: {
        icon: "Folder",
        title: "分销管理",
        isLink: "",
        isHide: false,
        isFull: false,
        isAffix: false,
        isKeepAlive: true
    }
}
```