快速开始

安装

pnpm add @aplus-frontend/ui

以及安装其外部依赖

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

引入

全局重设样式

main.ts

import '@aplus-frontend/ui/theme/reset.css'

样式引入

APlus-UI支持全量引入，此种方式会增加构建结果的大小，需要注意的是，仅业务组件会被注册成为全局组件。

main.ts

import { createApp } from 'vue'
import APlusUI from '@aplus-frontend/ui'
import '@aplus-frontend/ui/theme/index.css'
// 也可 import '@aplus-frontend/ui/theme/index.less'
import App from './App.vue'

const app = createApp(App)

app.use(APlusUI)
app.mount('#app')

按需加载

APlus-UI支持使用vite插件unplugin-aplus-ui来按需加载样式，使用方式如下：

// vite.config.ts
import aplusUIPlugin from 'unplugin-aplus-ui';
// 设置useSource=true可以加载.less
export default defineConfig({
  ...,
  plugins: [aplusUIPlugin({ useSource: true })]
})

修改namespace（可选）

APlus-UI支持修改样式的前缀，当样式文件加载的是.less后，使用如下方式：

// vite.config.ts
import aplusUIPlugin from 'unplugin-aplus-ui';
// 设置useSource=true可以加载.less
export default defineConfig({
  ...,
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          '@ns': 'xx'
        }
      }
    }
  }
})

经过以上设置，现在所有APlus-UI的组件前缀均为设置的@ns变量。

设置UI主题（可选）

APlus-UI内置了两套主题，分别为aplus-蓝色系主题（默认）以及admin-绿色系主题，可以通过ConfigProvider设置来切换这两种主题。

<template>
  <ConfigProvider ui-mode="admin">
    ...
  </ConfigProvider>
</template>
<script setup lang="ts">
import { ConfigProvider } from '@aplus-frontend/ui'
</script>