# vue-demo

**Repository Path**: hbtek-making/vue-demo

## Basic Information

- **Project Name**: vue-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 4
- **Created**: 2024-11-29
- **Last Updated**: 2025-09-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: cursor, Vue

## README

# Vue Admin Template

基于 Vue 3 + TypeScript + Vite 的后台管理系统模板，集成了常用的组件和功能。

## 技术栈

- 核心框架：Vue 3.0
- 构建工具：Vite
- 状态管理：Pinia
- UI 框架：Arco Design Vue
- CSS 框架：TailwindCSS
- 路由管理：Vue Router
- HTTP 请求：Fetch API
- 图表：ECharts
- 流程图：Vue Flow
- Markdown：Vue Markdown

## 项目结构

```bash
vue-demo
├── public/                 # 静态资源
├── src/
│   ├── assets/            # 项目资源文件
│   ├── components/        # 公共组件
│   ├── composables/       # 组合式API
│   ├── config/           # 配置文件
│   ├── layouts/          # 布局组件
│   ├── router/           # 路由配置
│   ├── services/         # API服务
│   ├── stores/           # 状态管理
│   ├── types/            # 类型定义
│   ├── utils/            # 工具函数
│   ├── views/            # 页面文件
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── .editorconfig         # 编辑器配置
├── .eslintrc.js         # ESLint配置
├── .gitignore           # Git忽略文件
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript配置
├── vite.config.ts       # Vite配置
└── README.md            # 项目说明
```

## 快速开始

### 环境要求

- Node.js v20.14.0
- Yarn 1.22.22

### 安装依赖

```bash
yarn install
```

### 开发环境运行

```bash
yarn dev
```

### 生产环境构建

```bash
yarn build
```

### 代码检查

```bash
yarn lint
```

## 自定义组件使用指南 (@components)

### BaseButton - 标准按钮组件

```vue
<BaseButton 
  type="primary" 
  size="medium"
  :loading="loading"
  @click="handleClick"
>
  按钮文本
</BaseButton>
```

### BaseForm - 表单组件

```vue
<BaseForm
  v-model="formData"
  :rules="rules"
  :loading="loading"
  @submit="handleSubmit"
>
  <template #form-items>
    <!-- 表单项 -->
  </template>
</BaseForm>
```

### BaseList - 列表组件

```vue
<BaseList
  :data="tableData"
  :loading="loading"
  :pagination="pagination"
  :search-fields="searchFields"
  @search="handleSearch"
>
  <template #columns>
    <!-- 表格列 -->
  </template>
</BaseList>
```

### UploadImage - 图片上传组件

```vue
<UploadImage
  v-model="imageUrl"
  :storage-type="'local'"
  shape="square"
  @change="handleChange"
/>
```

## 组合式API使用指南 (@composables)

### useLoading - 加载状态管理

```typescript
const { loading, startLoading, stopLoading } = useLoading()

const fetchData = async () => {
  startLoading()
  try {
    // 异步操作
  } finally {
    stopLoading()
  }
}
```

### useNotification - 消息通知

```typescript
const notify = useNotification()

notify.success('操作成功')
notify.error('操作失败')
notify.warning('警告信息')
notify.info('提示信息')
```

### usePermission - 权限控制

```vue
<!-- 组件方式 -->
<PermissionWrapper code="system:user:add">
  <button>添加用户</button>
</PermissionWrapper>

<!-- 指令方式 -->
<button v-permission="'system:user:add'">添加用户</button>

<!-- 路由方式 -->
{
  path: 'system-users',
  name: 'system-users',
  component: () => import('@/views/system/SystemUser.vue'),
  meta: { title: '系统用户', permissions: ['system:users:list'] },
}

```

## 工具函数使用指南 (@utils)

### request - HTTP请求工具
> 默认处理commonResult 直接返回 data 数据

```typescript
import { request } from '@/utils/request'

// GET请求
const getData = () => request.get<ResponseType>('/api/data')

// POST请求
const createData = (data: any) => request.post<ResponseType>('/api/data', {
  body: data,
  serviceType: ServiceType.xxx, // 服务类型(无,调用默认)
  customHeaders: { loginType: LoginType.ADMIN }, // 自定义请求头
})
```

### debounce - 防抖函数
> 单表组件自带防抖函数，无需手动实现

```typescript
import { debounce } from '@/utils/debounce'

const handleSearch = debounce((value: string) => {
  // 搜索逻辑
}, 300)
```

### filterEmptyValue - 过滤空值

```typescript
import { filterEmptyValue } from '@/utils/object'

const params = filterEmptyValue({
  name: '',
  age: 0,
  address: undefined
}) // 结果: { age: 0 }
```

## 开发规范

1. 组件使用优先级：
   - 优先使用项目自定义基础组件(@components)
   - 其次使用 ArcoDesign 组件
   - 最后考虑新建组件

2. 组合式API使用优先级：
   - 优先使用项目自定义组合式API(@composables)
   - 其次使用 Vue 核心组合式API
   - 最后考虑新建组合式API

3. 工具函数使用优先级：
   - 优先使用项目自定义工具函数(@utils)
   - 其次使用第三方工具库
   - 最后考虑新建工具函数

## 注意事项

1. 所有的API请求必须在 @/services 目录下定义
2. 组件的属性顺序必须遵循项目规范
3. 必须使用 TypeScript 编写代码
4. 遵循项目的注释规范
5. 确保代码通过 ESLint 检查

## 许可证

[MIT](LICENSE)