Vue 3.5 · TypeScript · 26 组件 Miao Design轻量、干净的 Vue 3 组件库
26 个打磨过的组件、完整 TypeScript 类型、设计变量驱动与内置深色模式。安装即用，不需要额外配置。
Skip to content
Vue 3.5 · TypeScript · 26 组件 miao-design · live playground
Miao Design
资源同步
可交互
Why Miao
小体积，但不将就
从设计变量到可访问性都按生产标准打磨，装进来就能直接用在正式项目里。
开箱即用
一条 npm 命令安装，app.use(MiaoDesign) 即可全局注册 32 个组件与 v-ripple 指令，无需额外配置。
完整的类型定义
全部组件由 TypeScript 编写并随包发布 .d.ts，props / 事件 / 插槽都有类型提示，重构不再靠猜。
设计变量驱动
所有视觉表现都落在 --m-* CSS 自定义属性上，换主题只要覆写一层变量，不必改组件源码。
深色模式就绪
内置 [data-theme="dark"] 一整套暗色令牌，跟随系统或手动切换，业务侧零成本接轨。
Material 手感
统一采用 MUI 的缓动曲线与时长令牌，按钮、开关、列表项都带点按涟漪与过渡反馈。
移动端友好
触摸事件与滚动区分处理、点击高亮清除、尺寸令牌自适应，桌面与移动端表现一致。
Quick Start
三行代码，全站可用
包体只依赖 Vue 3 本身，样式与主题变量随组件一同产出。
- 安装
miao-design（Vue 3.5+ 作为 peer 依赖由业务侧提供）。 - 在入口引入组件库与样式：
miao-design/style.css。 - 通过
app.use(MiaoDesign)注册，之后在模板里直接写<m-button />。 - 需要按需引入时改用具名导入
import { MButton } from 'miao-design'。
当前文档站收录了 26 个组件与 v-ripple 指令的完整用法、API 表格与可运行演示。
// 1. 安装：npm i miao-design
import { createApp } from 'vue'
import MiaoDesign from 'miao-design'
import 'miao-design/style.css'
import App from './App.vue'
// 2. 全局注册 32 个组件 + v-ripple 指令
createApp(App).use(MiaoDesign).mount('#app')