nb-base-ui

v1.0.2

Published

2 months ago

一个基于 Vue 3 的现代化自定义 UI 组件库

0High
0Medium
0Low

cng1985

vue vue3 component ui nb-ui button catalog tree element-plus components request http fetch ajax

NB-UI 组件库

一个基于 Vue 3 + Vite 的现代化自定义 UI 组件库。

✨ 特性

🚀 基于 Vue 3 Composition API
💡 使用 Vite 构建，开发体验极速
🎨 精心设计的组件样式
📦 开箱即用的高质量组件
🔧 支持按需引入和全局注册
💪 使用 JavaScript 开发，简单易用

📦 已实现的功能

UI 组件

✅ Button 按钮 - 支持多种类型、尺寸和状态
✅ Catalog 目录 - 基于 Element Plus 的目录/分类组件
- 支持搜索过滤
- 支持增删改查
- 支持拖拽排序
- 支持多选模式
- 支持图标和徽章
- 双击编辑节点

工具函数

✅ Request 网络请求 - 基于 Fetch 的完整 HTTP 请求工具
- 支持请求/响应拦截器
- 自动 JSON 转换
- 超时控制
- 文件上传/下载
- 错误处理

🔨 快速开始

📦 安装组件库

npm install nb-base-ui

或使用 yarn：

yarn add nb-base-ui

或使用 pnpm：

pnpm add nb-base-ui

💻 本地开发

如果你想参与开发或本地调试：

# 安装依赖
npm install

# 启动开发服务器（查看组件演示）
npm run dev

# 构建库文件（用于发布）
npm run build:lib

# 构建演示页面
npm run build

# 预览构建后的演示页面
npm run preview

📖 使用文档

全局注册

在 main.js 中：

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')

然后可以在任何组件中直接使用：

<template>
  <nb-button type="primary">按钮</nb-button>
</template>

按需引入（推荐）

<script setup>
import { Button, request } from 'nb-base-ui'
import 'nb-base-ui/dist/style.css'

const handleClick = () => {
  console.log('按钮被点击')
}

// 使用网络请求工具
const fetchData = async () => {
  try {
    const response = await request.get('/api/data')
    console.log(response.data)
  } catch (error) {
    console.error('请求失败:', error)
  }
}
</script>

<template>
  <div>
    <Button type="primary" @click="handleClick">主要按钮</Button>
    <Button type="success" size="large" round>大型圆角按钮</Button>
    <Button type="danger" plain disabled>禁用按钮</Button>
    <Button type="info" @click="fetchData">加载数据</Button>
  </div>
</template>

CDN 引入

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/nb-base-ui/dist/style.css">
</head>
<body>
  <div id="app">
    <nb-button type="primary">按钮</nb-button>
  </div>
  
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/nb-base-ui"></script>
  <script>
    const { createApp } = Vue
    const { default: NbUI } = window.NbUI
    
    createApp({}).use(NbUI).mount('#app')
  </script>
</body>
</html>

查看完整文档：

Button 按钮文档 - Button 组件使用方法和 API
Catalog 目录文档 - Catalog 组件使用方法和 API
Request 工具文档 - 网络请求工具使用说明

🎯 组件演示

启动开发服务器后，访问 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 发布指南。

快速发布步骤：

# 1. 登录 npm
npm login

# 2. 构建库文件
npm run build:lib

# 3. 发布
npm publish

🤝 参与贡献

欢迎提交 Issue 或 Pull Request 来帮助改进这个项目！

贡献步骤

Fork 本仓库
创建新的功能分支 (git checkout -b feature/AmazingFeature)
提交你的更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启一个 Pull Request

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme