straw-ui-vue

Straw UI

一个基于 Vue 3 + TypeScript + UnoCSS 的现代组件库。

特性

• 🚀 Vue 3 + TypeScript - 完整的类型支持
• 🎨 UnoCSS - 原子化 CSS，按需生成
• 📦 运行时依赖极轻 - 仅 @vueuse/core、@vueuse/math、clsx、tailwind-merge，Vue 3 为 peerDependency
• 🔧 按需导入 - 支持 tree-shaking
• 🌙 暗色主题 - 内置暗色模式支持

安装

npm install straw-ui-vue

快速开始

完整引入

import { createApp } from 'vue';
import StrawUI from 'straw-ui-vue';

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

按需导入

<script setup lang="ts">
import { StButton, StInput } from 'straw-ui-vue';
</script>

<template>
	<StButton>Click me</StButton>
	<StInput v-model="value" placeholder="Type something" />
</template>

UnoCSS 集成

Straw UI 基于 UnoCSS 构建，需要配置 content 以确保组件库中使用的样式类能被正确扫描：

// uno.config.ts
import { defineConfig, presetWind4, presetIcons } from 'unocss';
import { presetStrawUI } from 'straw-ui-vue/unocss';

export default defineConfig({
	presets: [
		presetWind4(),
		presetIcons(),
		presetStrawUI(), // Straw UI 预设
	],
	content: {
		pipeline: {
			include: [
				// 默认的模板文件匹配
				/\.(vue|[jt]sx|mdx?|html)($|\?)/,
				// 让 pipeline 过滤器放行组件库 dist 文件
				'node_modules/straw-ui-vue/dist/**/*.{js,mjs}',
			],
		},
		filesystem: [
			// 扫描组件库 dist 产物中使用的样式类
			'node_modules/straw-ui-vue/dist/**/*.{js,mjs}',
		],
	},
});

// main.ts
import 'straw-ui-vue/variables.css'; // 主题预设变量，或使用自己的变量文件

详细配置请参阅 快速开始。

TypeScript 支持

Straw UI 提供完整的 TypeScript 类型支持。

组件列表

自定义指令

主题定制

Straw UI 使用 CSS 变量定义主题，你可以通过覆盖变量来自定义主题：

:root {
	--primary: #3b82f6;
	--primary-foreground: #ffffff;
	--radius: 0.5rem;
	/* 更多变量... */
}

[data-theme='dark'] {
	--primary: #3b82f6;
	/* 暗色主题变量... */
}

完整变量列表请参阅 快速开始。

文档

• 快速开始
• 全局配置
• 类型可从 straw-ui-vue/types 子路径导入，组件的 props/emits/slots 均有声明。

License

MIT