快速开始

本文将帮助你快速上手简约蓝组件库。

安装

使用包管理器

推荐使用 npm、yarn 或 pnpm 安装：

npm

npm install @simple-blue/components ant-design-vue

yarn

yarn add @simple-blue/components ant-design-vue

pnpm

pnpm add @simple-blue/components ant-design-vue

完整引入

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

import { createApp } from 'vue';
import App from './App.vue';
import SimpleBlueUI from '@simple-blue/components';
import '@simple-blue/components/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 '@simple-blue/components';
</script>

自动按需引入

安装 unplugin-vue-components 和 unplugin-auto-import：

npm install -D unplugin-vue-components unplugin-auto-import

在 vite.config.ts 中配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false,
        }),
      ],
      // 自动导入 Simple Blue 组件
      dirs: ['src/components'],
      dts: 'src/components.d.ts',
    }),
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: 'src/auto-imports.d.ts',
    }),
  ],
});

配置完成后，可以直接使用组件，无需手动导入：

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

<script setup lang="ts">
// 无需导入，自动识别
</script>

第一个示例

创建一个简单的仪表盘页面：

<template>
  <div class="dashboard">
    <a-row :gutter="16">
      <a-col :span="6">
        <sb-stat-card
          title="总销售额"
          :value="12345"
          trend="+12.5%"
          trend-type="up"
        >
          <template #footer>
            <span>日销售额 ¥1,234</span>
          </template>
        </sb-stat-card>
      </a-col>
      
      <a-col :span="6">
        <sb-stat-card
          title="访问量"
          :value="8846"
          trend="+8.2%"
          trend-type="up"
        >
          <template #footer>
            <span>日访问量 1,234</span>
          </template>
        </sb-stat-card>
      </a-col>
      
      <a-col :span="6">
        <sb-stat-card
          title="支付笔数"
          :value="6560"
          trend="-3.1%"
          trend-type="down"
        >
          <template #footer>
            <span>转化率 60%</span>
          </template>
        </sb-stat-card>
      </a-col>
      
      <a-col :span="6">
        <sb-stat-card
          title="运营活动效果"
          :value="78"
          trend="+5.0%"
          trend-type="up"
        >
          <template #footer>
            <span>周同比 12%</span>
          </template>
        </sb-stat-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { StatCard as SbStatCard } from '@simple-blue/components';
import { Row as ARow, Col as ACol } from 'ant-design-vue';
</script>

<style scoped>
.dashboard {
  padding: 24px;
  background: #f0f2f5;
}
</style>

使用主题

组件库支持主题定制，可以在应用启动时设置主题：

import { createApp } from 'vue';
import App from './App.vue';
import SimpleBlueUI, { ThemeManager, simpleBlueTheme } from '@simple-blue/components';

const app = createApp(App);
app.use(SimpleBlueUI);

// 设置主题
const themeManager = ThemeManager.getInstance();
themeManager.setTheme(simpleBlueTheme);

app.mount('#app');

TypeScript 支持

组件库提供了完整的 TypeScript 类型定义。如果你使用 TypeScript，可以获得完整的类型提示：

import type { StatCardProps } from '@simple-blue/components';

const cardProps: StatCardProps = {
  title: '总销售额',
  value: 12345,
  trend: '+12.5%',
  trendType: 'up',
};

下一步

• 安装 - 了解更多安装选项
• 主题定制 - 学习如何定制主题
• 按需引入 - 深入了解按需引入
• 组件总览 - 查看所有可用组件