bxs-norm-ui

基于 Vue3 的企业级移动端组件库，依赖 Vant 4.x。

特性

• 🚀 使用 Vue3 <script setup> + Composition API 开发
• 🎨 Less 主题变量，支持暗黑模式
• 📝 TypeScript 全量类型定义
• 📦 支持 ESM / CJS 双格式产物
• 📖 VitePress 组件文档站点
• ✅ Vitest 单元测试保障

安装

npm install bxs-norm-ui

前置依赖（Peer Dependencies）

npm install vue vant

使用

全量注册

import { createApp } from 'vue'
import BxsNormUI from 'bxs-norm-ui'
import 'bxs-norm-ui/style.css'

const app = createApp(App)
app.use(BxsNormUI)

按需引入

import { BxnShareSheet } from 'bxs-norm-ui'
import 'bxs-norm-ui/style.css'

组件列表

| 组件名 | 说明 | | --------------- | ---------------------------------------------------------------------------- | | BxnShareSheet | 从底部弹出的分享面板，支持配置分享有效期、说明文案、分享渠道及自定义操作选项 |

Hooks

| Hook | 说明 | | --------------- | ---------------- | | useToggle | 布尔值切换 | | useWindowSize | 监听窗口尺寸变化 |

开发

# 安装依赖
npm install

# 启动组件预览（play 环境）
npm run dev

# 构建产物（es/ 和 lib/）
npm run build

# 运行单元测试
npm test

# 监听模式运行测试
npm run test:watch

# 生成测试覆盖率报告
npm run test:coverage

# 启动文档开发服务
npm run docs:dev

# 构建文档
npm run docs

# 代码检查
npm run lint

# 代码格式化
npm run format

# 生成新组件模板
npm run gen -- MyComponent

# 发布版本
npm run release

# 生成 CHANGELOG
npm run changelog

项目结构

bxs-norm-ui/
├── src/
│   ├── components/       # 业务组件
│   │   └── share-sheet/  # 分享面板组件
│   ├── hooks/            # 共用 Hooks
│   ├── styles/           # 样式系统（Less 变量 / 暗黑模式 / Reset）
│   ├── utils/            # 工具函数
│   └── index.ts          # 统一出口
├── play/                 # 组件预览环境
├── docs/                 # VitePress 文档站点
├── build/                # Vite 构建配置
├── scripts/              # 脚手架脚本（gen / release）
├── es/                   # ESM 产物
└── lib/                  # CJS 产物

说明文档

bxs-norm-ui 说明文档

License

MIT