@summerwintericeman/g-ui-vue

gh-ui

一个轻量的 Vue 3 组件库（示例组件：Table）。支持发布到 npm，供其他项目引入使用。

特性

• 基于 Vue 3 + <script setup> + TypeScript
• 支持按需/全量引入，app.use(GhUI) 一键注册
• 构建产物包含 ES / UMD 与类型声明（.d.ts）
• 本地预览文档站（类 antd，按分类切换组件），不随 npm 包发布

目录结构

gh-ui/
├── src/                # 组件库源码（发布内容）
│   ├── components/     # 各组件（当前：table）
│   ├── styles/         # 全局样式与设计变量
│   ├── utils/          # 工具（withInstall 等）
│   └── index.ts        # 库入口
├── docs/               # 本地预览文档站（不发布）
│   ├── layouts/        # 布局 / 侧边分类导航
│   ├── pages/          # 各组件演示页
│   ├── mock/           # 演示用模拟数据
│   └── main.ts
├── index.html          # 文档站入口
├── vite.config.ts      # 同时用于 dev（文档站）与 build（库）
└── package.json

本地开发（预览文档站）

npm install
npm run dev

打开终端提示的本地地址即可看到类 antd 的文档站，左侧按分类切换组件。

构建并发布

npm run build          # 构建库到 dist/（ES + UMD + 类型 + style.css）
npm publish            # 发布到 npm（仅 dist/ 会被上传）

在业务项目中使用

npm install g-ui-vue

// main.ts
import { createApp } from 'vue'
import GhUI from 'g-ui-vue'
import 'gh-ui/dist/style.css'
import App from './App.vue'

createApp(App).use(GhUI).mount('#app')

<template>
  <gh-table :columns="columns" :data-source="data" bordered stripe />
</template>

<script setup>
const columns = [
  { title: '姓名', key: 'name', dataIndex: 'name' },
  { title: '年龄', key: 'age', dataIndex: 'age' },
]
const data = [{ id: 1, name: '张三', age: 28 }]
</script>

也支持按需引入：

import { GhTable } from 'g-ui-vue'
import 'gh-ui/dist/style.css'

新增组件

1. 在 src/components/<name>/ 下创建 <Name>.vue 与 index.ts（export const GhXxx = withInstall(...)）；
2. 在 src/index.ts 中导出并注册；
3. 在 docs/nav.ts 对应分类中加入该组件，并在 docs/pages/components/<name>/ 编写演示页；
4. 在 docs/pages/ComponentView.vue 的 loaders 中登记路由加载器。