Mod Business Components

一个基于 Vue 3 + TypeScript + Vite 的业务组件库，支持 bundless 模式。

特性

• 🚀 Bundless 模式: 支持按需加载，减少打包体积
• 🎯 TypeScript: 完整的类型支持
• 📦 ESM: 原生 ES 模块支持
• 🔧 Vite: 快速的构建工具
• 📁 源码保留: dist 目录包含完整源码，便于调试

安装

pnpm add @yqg/low-code-component-lib

使用方式

全量引入

import { YQGQrCode, BigFishJumpTags, OverseaServerTable } from '@yqg/low-code-component-lib'

按需引入 (Bundless 模式)

// 使用原始名称
import { YQGQrCode, BigFishJumpTags, OverseaServerTable } from '@yqg/low-code-component-lib'

全量挂载 (Vue.use)

import { createApp } from 'vue'
import ComponentLib from '@yqg/low-code-component-lib'

const app = createApp(App)

// 全量挂载所有组件
app.use(ComponentLib)

// 现在可以在模板中直接使用组件，无需单独引入
// <YQGQrCode />
// <BigFishJumpTags />
// <OverseaServerTable />

开发

# 安装依赖
pnpm install

# 本地开发环境启动
pnpm dev

# 预览构建结果
pnpm dev:preview

# 构建
pnpm build

# 开发模式构建
pnpm build:dev

本地开发环境

启动 pnpm dev 后，会在浏览器中打开一个开发环境页面，展示所有组件的使用示例和交互功能：

• YQGQrCode: 二维码组件，支持动态输入内容
• BigFishJumpTags: 跳转标签组件，支持添加/删除标签
• OverseaServerTable: 海外服务器表格组件，展示表格功能

开发环境地址：http://localhost:5173

构建输出

Bundless 模式下会生成以下文件结构：

dist/
├── index.es.js    # 主入口文件
├── index.d.ts                  # 主入口类型文件
├── components/                 # 组件源码
│   ├── yqg-qr-code/
│   │   └── index.vue
│   ├── bigfish-jump-tags/
│   │   └── index.vue
│   └── overseas-server-table/
│       └── index.vue
├── utils/                      # 工具函数源码
└── vendor/                     # 第三方库源码

注意: dist 目录中包含了完整的组件源码，便于调试和二次开发。

组件列表

• YQGQrCode - 二维码组件
• BigFishJumpTags - 跳转标签组件
• OverseaServerTable - 海外服务器表格组件

依赖

• Vue 3.3+
• Ant Design Vue 4.0+
• Day.js 1.11+

License

MIT