Vue Admin Template

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            # 项目说明

yarn install

yarn dev

yarn build

yarn lint

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

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

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

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

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

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

const notify = useNotification()

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

<!-- 组件方式 -->
<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'] },
}

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 }, // 自定义请求头
})

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

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

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

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