# nb-ui
**Repository Path**: cng1985/nb-ui
## Basic Information
- **Project Name**: nb-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-16
- **Last Updated**: 2025-10-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# NB-UI 组件库
一个基于 Vue 3 + Vite 的现代化自定义 UI 组件库。
## ✨ 特性
- 🚀 基于 Vue 3 Composition API
- 💡 使用 Vite 构建，开发体验极速
- 🎨 精心设计的组件样式
- 📦 开箱即用的高质量组件
- 🔧 支持按需引入和全局注册
- 💪 使用 JavaScript 开发，简单易用
## 📦 已实现的功能
### UI 组件
- ✅ **Button 按钮** - 支持多种类型、尺寸和状态
- ✅ **Catalog 目录** - 基于 Element Plus 的目录/分类组件
- 支持搜索过滤
- 支持增删改查
- 支持拖拽排序
- 支持多选模式
- 支持图标和徽章
- 双击编辑节点
### 工具函数
- ✅ **Request 网络请求** - 基于 Fetch 的完整 HTTP 请求工具
- 支持请求/响应拦截器
- 自动 JSON 转换
- 超时控制
- 文件上传/下载
- 错误处理
## 🔨 快速开始
### 📦 安装组件库
```bash
npm install nb-base-ui
```
或使用 yarn：
```bash
yarn add nb-base-ui
```
或使用 pnpm：
```bash
pnpm add nb-base-ui
```
### 💻 本地开发
如果你想参与开发或本地调试：
```bash
# 安装依赖
npm install
# 启动开发服务器（查看组件演示）
npm run dev
# 构建库文件（用于发布）
npm run build:lib
# 构建演示页面
npm run build
# 预览构建后的演示页面
npm run preview
```
## 📖 使用文档
### 全局注册
在 `main.js` 中：
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import NbUI from 'nb-base-ui'
import 'nb-base-ui/dist/style.css'
const app = createApp(App)
app.use(NbUI)
app.mount('#app')
```
然后可以在任何组件中直接使用：
```vue
按钮
```
### 按需引入（推荐）
```vue
```
### CDN 引入
```html
按钮
```
查看完整文档：
- [Button 按钮文档](./docs/USAGE.md) - Button 组件使用方法和 API
- [Catalog 目录文档](./docs/CATALOG.md) - Catalog 组件使用方法和 API
- [Request 工具文档](./docs/UTILS.md) - 网络请求工具使用说明
## 🎯 组件演示
启动开发服务器后，访问 `http://localhost:5173` 可以看到所有组件的演示效果。
## 📂 项目结构
```
nb-ui/
├── docs/ # 文档目录
│ ├── USAGE.md # 使用文档
│ └── COMPONENT_DESIGN.md # 组件设计规范
├── public/ # 公共资源
├── src/
│ ├── components/ # 组件库目录
│ │ ├── Button/ # Button 组件
│ │ │ ├── Button.vue
│ │ │ └── index.js
│ │ └── index.js # 组件库入口
│ ├── App.vue # 组件演示页面
│ └── main.js # 应用入口
├── index.html
├── package.json
├── vite.config.js # Vite 配置
└── README.md
```
## 🛠️ 技术栈
- **Vue 3.5.22** - 渐进式 JavaScript 框架
- **Element Plus** - 基于 Vue 3 的组件库
- **Vite 7.1.7** - 下一代前端构建工具
- **@vitejs/plugin-vue** - Vue 3 单文件组件支持
- **vite-plugin-vue-devtools** - Vue 开发者工具
## 🎨 设计理念
NB-UI 遵循以下设计原则：
- **简洁** - 保持组件的简洁性和易用性
- **灵活** - 提供丰富的配置选项和插槽
- **美观** - 精心设计的视觉效果和交互体验
- **高效** - 轻量级实现，性能优先
## 📝 开发计划
- [ ] Form 表单组件（基于 Element Plus 封装）
- [ ] Table 表格组件（基于 Element Plus 封装）
- [ ] Dialog 对话框组件（基于 Element Plus 封装）
- [ ] Upload 上传组件（基于 Element Plus 封装）
- [ ] Chart 图表组件
- [ ] 更多实用组件...
## 📤 发布到 NPM
如果你想发布自己的版本或贡献代码，请查看 [NPM 发布指南](./docs/NPM_PUBLISH.md)。
快速发布步骤：
```bash
# 1. 登录 npm
npm login
# 2. 构建库文件
npm run build:lib
# 3. 发布
npm publish
```
## 🤝 参与贡献
欢迎提交 Issue 或 Pull Request 来帮助改进这个项目！
### 贡献步骤
1. Fork 本仓库
2. 创建新的功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交你的更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启一个 Pull Request
## 💡 建议的 IDE 配置
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
## 🌐 推荐的浏览器配置
### Chromium 内核浏览器（Chrome、Edge、Brave 等）
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- [在 Chrome DevTools 中启用自定义对象格式化器](http://bit.ly/object-formatters)
### Firefox
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
- [在 Firefox DevTools 中启用自定义对象格式化器](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
## 📄 许可证
MIT License
## 👨💻 作者
NB-UI Team
---
⭐ 如果这个项目对你有帮助，请给它一个 Star！