安装
环境要求
- Node.js 16.0 或更高版本
- Vue 3.2 或更高版本
使用包管理器
推荐使用包管理器（npm、yarn 或 pnpm）安装简约蓝组件库。
bash
npm install @simple-blue/components ant-design-vuebash
yarn add @simple-blue/components ant-design-vuebash
pnpm add @simple-blue/components ant-design-vue依赖说明
必需依赖
- ant-design-vue - 组件库基于 Ant Design Vue 封装，需要安装此依赖
- vue - Vue 3.2+
可选依赖
- @ant-design/icons-vue - 如果需要使用图标组件
- dayjs - 如果使用日期相关组件
bash
npm install @ant-design/icons-vue dayjsCDN 引入
如果你不想使用构建工具，也可以通过 CDN 的方式引入：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4.x/dist/reset.css">
<link rel="stylesheet" href="https://unpkg.com/@simple-blue/components/dist/style.css">
</head>
<body>
<div id="app">
<sb-stat-card
title="总销售额"
:value="12345"
trend="+12.5%"
trend-type="up"
></sb-stat-card>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/ant-design-vue@4.x/dist/antd.js"></script>
<script src="https://unpkg.com/@simple-blue/components/dist/simple-blue.umd.js"></script>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
// ...
}
}
});
app.use(SimpleBlueUI);
app.mount('#app');
</script>
</body>
</html>注意
通过 CDN 引入会加载所有组件，不支持按需加载，不推荐在生产环境使用。
开发环境配置
Vite 项目
如果你使用 Vite，推荐安装以下插件以获得更好的开发体验：
bash
npm install -D unplugin-vue-components unplugin-auto-import在 vite.config.ts 中配置：
typescript
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,
}),
],
}),
AutoImport({
imports: ['vue', 'vue-router'],
dts: 'src/auto-imports.d.ts',
}),
],
});Webpack 项目
如果你使用 Webpack，可以安装对应的 Webpack 插件：
bash
npm install -D unplugin-vue-components unplugin-auto-import在 webpack.config.js 中配置：
javascript
const Components = require('unplugin-vue-components/webpack');
const AutoImport = require('unplugin-auto-import/webpack');
const { AntDesignVueResolver } = require('unplugin-vue-components/resolvers');
module.exports = {
// ...
plugins: [
Components({
resolvers: [
AntDesignVueResolver({
importStyle: false,
}),
],
}),
AutoImport({
imports: ['vue', 'vue-router'],
dts: 'src/auto-imports.d.ts',
}),
],
};TypeScript 配置
如果你使用 TypeScript，需要在 tsconfig.json 中添加类型声明：
json
{
"compilerOptions": {
"types": ["@simple-blue/components/global"]
},
"include": [
"src/**/*",
"src/auto-imports.d.ts",
"src/components.d.ts"
]
}样式引入
完整引入样式
在 main.ts 中引入所有样式：
typescript
import '@simple-blue/components/dist/style.css';
import 'ant-design-vue/dist/reset.css';按需引入样式
如果使用 unplugin-vue-components，样式会自动按需引入，无需手动配置。
验证安装
创建一个简单的组件来验证安装是否成功：
vue
<template>
<div>
<sb-stat-card
title="测试卡片"
:value="100"
trend="+10%"
trend-type="up"
/>
</div>
</template>
<script setup lang="ts">
import { StatCard as SbStatCard } from '@simple-blue/components';
</script>如果组件正常显示，说明安装成功！
常见问题
找不到模块
如果遇到 "Cannot find module '@simple-blue/components'" 错误：
- 确认已正确安装依赖：
npm install @simple-blue/components - 尝试删除
node_modules和package-lock.json，重新安装 - 检查
package.json中是否包含该依赖
样式不生效
如果组件样式不生效：
- 确认已引入样式文件：
import '@simple-blue/components/dist/style.css' - 确认已引入 Ant Design Vue 的重置样式：
import 'ant-design-vue/dist/reset.css' - 检查样式引入顺序，Ant Design Vue 的样式应该在组件库样式之前
TypeScript 类型错误
如果遇到 TypeScript 类型错误：
- 确认
tsconfig.json中包含了类型声明文件 - 尝试重启 IDE 或 TypeScript 服务
- 检查是否安装了
@types/node等必要的类型包