快速开始

本指南将帮助你快速开始使用 UI 组件库平台。

选择系统

首先，你需要选择要使用的组件库系统。目前平台提供：

简约蓝组件库

企业级 B 端数据仪表盘组件库，适合：

• 数据仪表盘应用
• 后台管理系统
• 数据分析平台
• 企业级应用

查看详情 →

更多系统

更多组件库系统正在开发中...

安装

根据你选择的系统进行安装：

简约蓝

npm install @ui-platform/simple-blue ant-design-vue

系统2（未来）

npm install @ui-platform/system-2 ant-design-vue

使用

完整引入

import { createApp } from 'vue';
import App from './App.vue';
import SimpleBlueUI from '@ui-platform/simple-blue';
import '@ui-platform/simple-blue/dist/style.css';
import 'ant-design-vue/dist/reset.css';

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

按需引入

<template>
  <sb-stat-card
    title="总销售额"
    :value="12345"
    trend="+12.5%"
    trend-type="up"
  />
</template>

<script setup lang="ts">
import { StatCard as SbStatCard } from '@ui-platform/simple-blue';
</script>

多系统混用

如果你需要使用多个系统的组件：

npm install @ui-platform/simple-blue @ui-platform/system-2

<template>
  <div>
    <!-- 简约蓝系统 -->
    <sb-stat-card title="销售额" :value="12345" />
    
    <!-- 系统2 -->
    <s2-component />
  </div>
</template>

<script setup lang="ts">
import { StatCard as SbStatCard } from '@ui-platform/simple-blue';
import { Component as S2Component } from '@ui-platform/system-2';
</script>

下一步

• 系统列表 - 查看所有可用系统
• 简约蓝组件库 - 开始使用简约蓝组件库