QXS-BNS 组件库文档指南 ​

QXS-BNS 是一个基于 Vue 3 + TypeScript 构建的企业级组件库，专为趣学术业务场景设计。

选择适合的模块 ​

如果你还不确定应该从哪个包开始接，先看这张能力总览。
先分清模块边界，再进入具体组件或工具页，会比直接翻字段表更高效。

选择开始路径 ​

文档阅读顺序建议是：先安装，再跑最小接入，最后回到单页 API。
不要一开始就扎进字段表，先把“能不能跑起来”确认掉。

文档结构 ​

快速开始 ​

• 安装指南 - 安装和配置说明
• 快速开始 - 快速上手指南
• 特性介绍 - 组件库核心特性

核心模块 ​

• 组件库安装 - 跨框架 Web Components 组件集合
• 工具函数安装 - 通用工具函数库
• Hooks 安装 - Vue 3 Composition API Hooks
• 指令安装 - Vue 自定义指令

开发指南 ​

• 开发指南 - 开发环境搭建和规范
• 创建文档必读 - 组件文档模板、demo 写法和 API 编排要求
• 依赖管理 - 智能依赖管理系统
• 标签管理 - 版本标签管理工具

快速导航 ​

新手入门 ​

1. 安装指南 - 环境要求和安装方式
2. 快速开始 - 5分钟上手指南
3. 特性介绍 - 组件库核心特性
4. 组件库安装 - 选择需要接入的库

开发者 ​

1. 开发指南 - 开发环境和规范
2. 创建文档必读 - 写组件文档前先看这一页
3. 依赖管理 - 智能依赖管理
4. 组件开发 - 组件开发约定

维护者 ​

1. 项目架构 - 项目结构说明
2. 构建发布 - 构建和发布流程
3. 标签管理 - 版本标签管理

使用指南 ​

按场景选择 ​

业务页面 / 宿主页面

• 使用 @qxs-bns/components 直接接入 Web Components
• 适合管理后台、H5 页面、混合宿主和题目编辑场景

工具函数

• 独立使用各种工具函数
• 支持按需引入，减少打包体积

模块说明 ​

特色功能 ​

• 🎯 企业级 - 专为企业级应用设计
• 📱 跨宿主接入 - 支持 Vue、React、原生 HTML 等宿主
• 🔧 智能依赖 - 自动管理组件依赖关系
• 📦 按需加载 - 支持 Tree-shaking
• 🎨 主题定制 - 灵活的主题系统
• 📝 TypeScript - 完整的类型定义

文档规范 ​

• 所有文档使用 Markdown 格式
• 遵循统一的文档模板
• 包含完整的示例代码
• 提供清晰的 API 说明
• 支持在线演示和代码预览
• 组件文档优先展示 demo 和说明，API 表格放在下半部分
• demo 的 title 必须直接写当前功能，不使用“基础用法 / 编辑态 / 示例一”这类泛标题