Vue 3 · TypeScript · Astro Islands
@ug666/vue
一个面向业务项目的 Vue 3 UI 组件库,覆盖按钮、表单、反馈、导航与布局等高频场景。当前文档区基于 Astro + Vue 岛屿模式构建,所有示例均直接使用真实组件渲染。
37
组件文档
9
Composables
100%
暗色模式覆盖
① 安装
@ug666/utils 会作为依赖自动装入。
bun add @ug666/vue② 引入主题样式(必须)
在项目入口(如 main.ts)引入一次;未引入时组件颜色不会生效。切换暗色模式给 <html> 加 class="dark" 即可。
import '@ug666/vue/tokens.css' 快速开始
使用 Composition API 直接组合组件与 composables,快速构建业务页面。
import { ref } from 'vue'
import { UButton, UCard, UCardContent, UCardHeader, UCardTitle, useToggle } from '@ug666/vue'
const { value: visible, toggle } = useToggle(true)
const count = ref(0)
Vue 组件特性
围绕 Vue 3 组合式开发体验设计,兼顾业务效率与演示一致性。
真实组件渲染
所有页面中的预览均使用 @ug666/vue 真实组件,不是静态截图。
Astro 岛屿模式
内容页由 Astro 输出,交互区由 Vue 组件按需挂载。
组合式函数配套
内置防抖、分页、复制、表单与通知等高频 composables。
Props 说明完整
每个组件页都附带属性表格、导入方式与代码示例。
暗色模式兼容
所有新建页面与 demo 均内置 dark: 样式支持。
文档路径隔离
Vue 文档位于 /vue/*,与 React 文档路径完全分离。