moongate-vue

🌙 Moongate Vue

English | 中文

Moongate Vue 是一个受月亮启发的极简 Vue 3 组件库。设计令牌驱动，CSS 优先，框架无关。

特性

• 🌙 月亮哲学 — 克制、冷静、秩序感
• 📦 极致轻量 — 完整组件库（JS + CSS）在 25KB (gzipped) 以内
• 🎨 设计令牌驱动 — 基于 CSS 变量，主题切换 effortless
• 🔧 CSS 优先 — 样式与逻辑解耦，可跨框架复用
• ✨ 极简 API — 绝大多数组件 2-8 个 props（少数复杂组件如 Button/Select 略多），易学易用
• 🚀 零依赖 — 无需额外配置，开箱即用
• ⚡ SSR 就绪 — 完美适配 Nuxt 4 / VitePress 等服务端渲染场景
• ✅ 测试保障 — Vitest + jsdom：29 个组件 + 4 个公开 composables（useForm / useMessage / useToast / useMenuKeyboard）+ SSR/a11y 回归 + Playwright e2e（29 用例），共 600 个测试（语句覆盖率 94% / 分支覆盖率 85%）
• 🔧 工程规范 — ESLint + Prettier 统一风格，husky 提交前自动检查

安装

npm install moongate-vue
# 或
pnpm add moongate-vue

💡 非侵入式样式：style.css 不重置全局样式，唯一例外是 <code> / <pre> 会被自动着色；可选引入 moongate-vue/reset.css 统一 box-sizing: border-box。

要求：Vue ^3.5.0 或更高版本。浏览器支持与 VitePress 基线保持一致（Chrome 111+ / Firefox 113+ / Edge 111+ / Safari 16.2+）。详见完整安装指南。

快速开始

<script setup>
import { Button, useMessage } from 'moongate-vue'
import 'moongate-vue/style.css'

const message = useMessage()
</script>

<template>
  <Button variant="filled" color="primary" @click="message.success('欢迎使用 Moongate')">
    月光按钮
  </Button>
</template>

📖 在线文档

访问 Moongate Vue 官方文档 查看所有组件 API、交互示例与主题定制指南。

组件列表

说明：总计 29 个组件 + 2 个样式工具，覆盖日常开发绝大多数场景。

TypeScript 类型

所有组件均导出其 Props 类型，并提供共享工具类型：

import type {
  ButtonProps,
  TableProps,
  SelectValue,
  SelectOption,
  TabItem,
  DropdownOption,
  FormProps,
} from 'moongate-vue'

function renderTable<T>(props: TableProps<T>) {
  /* ... */
}

完整类型列表：每个组件的 XxxProps、TableColumn/SortParams/CellSlotProps/ColumnSlotProps、DropdownOption/DropdownPlacement、SelectValue/SelectOption、TabItem、FormProps、Config/LocaleTexts，以及 composable 类型（Rule/FieldRules/UseFormOptions/MenuItemBase）。

设计令牌

Moongate Vue 基于完整的设计令牌系统（colors.css 和 layout.css）。通过覆盖 CSS 变量即可完成主题定制：

:root {
  --ui-primary: #3b82f6;
  --ui-spacing-md: 12px;
}

完整变量参考见设计令牌指南。

全局配置

内置文案默认跟随 document.documentElement.lang 适配中英文（非中文 lang 一律视为英文），也可用 setConfig 全局覆盖：

import { setConfig } from 'moongate-vue'

setConfig({ locale: 'en-US' })
setConfig({ texts: { empty: '没有数据' } })

优先级：组件 prop > setConfig texts > 语言内置文案。完整文案列表与占位符见国际化配置。

许可证

MIT

相关链接

• 在线文档
• Bundlephobia 体积分析

☕ 赞助支持