快速开始

安装

pnpm add @aplus-frontend/ui

以及安装其外部依赖

pnpm add @aplus-frontend/antdv @aplus-frontend/icon @aplus-frontend/oss vxe-table

引入

全局重设样式

import '@aplus-frontend/ui/es/src/style/reset.css'

修改namespace（可选）

通过ConfigProvider的namespace属性来设置命名空间，设置后所有生成的css变量使用此命名空间作为前缀。

设置UI主题（可选）

APlus-UI通过Design Token来设置主题，部分组件可以通过设置组件上的属性uiMode来使用不同的UI模式，不同的模式下组件显示效果略有不同。

你也可以使用Design Token在全局/组件上自定义部分样式。

<template>
  <ConfigProvider :aplusToken="{...your theme}">
    ...
  </ConfigProvider>
</template>
<script setup lang="ts">
import { ConfigProvider } from '@aplus-frontend/ui'
</script>

零运行时（zeroRuntime）

自7.28.0版本后，aplus-ui提供的zeroRuntime模式来提升应用性能。开启后，组件将不在运行时生成样式，样式需要自行引入。

<script lang="ts" setup>
import '@aplus-frontend/ui/dist/aplus-ui.css';
</script>
<template>
  <ConfigProvider zero-runtime>
    ...
  </ConfigProvider>
</template>
<script setup lang="ts">
import { ConfigProvider } from '@aplus-frontend/ui'
</script>

默认生成的aplus-ui.css包含了组件的所有样式，但css变量仍然会在运行时注入到页面；如果通过ConfigProvider设置了namespace，你需要使用CLI来生成样式，不能使用默认样式。