Vue Ace Admin

Appearance

快速开始 ​

本指南将帮助你快速开始使用 @codexlin/ace-admin-ui 组件库。

安装 ​

使用你喜欢的包管理器安装：

bash
pnpm add @codexlin/ace-admin-ui
bash
npm install @codexlin/ace-admin-ui
bash
yarn add @codexlin/ace-admin-ui

完整引入 ​

在 main.ts 中引入所有组件：

typescript
import { createApp } from 'vue'
import App from './App.vue'
import AceAdminUI from '@codexlin/ace-admin-ui'
import '@codexlin/ace-admin-ui/dist/ace-admin-ui.css'

const app = createApp(App)
app.use(AceAdminUI)
app.mount('#app')

按需引入（推荐） ​

只引入需要的组件，减小打包体积：

vue
<script setup lang="ts">
import { ProButton, ProTable, ProSearchForm } from '@codexlin/ace-admin-ui'
import '@codexlin/ace-admin-ui/dist/ace-admin-ui.css'
</script>

<template>
  <ProButton type="primary">点击我</ProButton>
</template>

基础示例 ​

1. 使用 ProButton ​

ProButton 支持自动 loading 和确认弹窗功能。

2. 使用 ProSearchForm ​

配置化的搜索表单组件。

3. 使用 ProTable ​

增强的表格组件，支持斑马纹、工具栏等。

4. 使用 useList Hook ​

一体化列表数据管理。

完整 CRUD 示例 ​

组合所有组件实现完整的 CRUD 功能。

下一步 ​

TypeScript 支持 ​

所有组件和 Hooks 都提供完整的 TypeScript 类型定义：

typescript
import type {
  ProButtonProps,
  ProTableProps,
  ProSearchFormProps,
  SearchField,
  UseListProps
} from '@codexlin/ace-admin-ui'

// 完整的类型提示和检查
const fields: SearchField[] = [
  { name: 'username', label: '用户名', component: 'a-input' }
]

常见问题 ​

如何全局注册组件？ ​

typescript
// main.ts
import AceAdminUI from '@codexlin/ace-admin-ui'
import '@codexlin/ace-admin-ui/dist/ace-admin-ui.css'

app.use(AceAdminUI)

如何按需引入？ ​

直接从包中导入需要的组件即可，现代打包工具会自动 Tree Shaking。

是否需要单独引入 Ant Design Vue？ ​

需要。@codexlin/ace-admin-ui 将 ant-design-vue 作为 peer dependency，你需要在项目中安装：

bash
pnpm add ant-design-vue

然后在 main.ts 中引入：

typescript
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

app.use(Antd)