nnb-ui

v1.0.0

Published

2 months ago

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

0High
0Medium
0Low

cng1985

vue vue3 component ui nb-ui button components

NB-UI 组件库

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

✨ 特性

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

📦 已实现的组件

✅ Button 按钮 - 支持多种类型、尺寸和状态

🔨 快速开始

📦 安装组件库

npm install nb-ui

或使用 yarn：

yarn add nb-ui

或使用 pnpm：

pnpm add nb-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-ui'
import 'nb-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 } from 'nb-ui'
import 'nb-ui/dist/style.css'

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

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

CDN 引入

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/nb-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-ui"></script>
  <script>
    const { createApp } = Vue
    const { default: NbUI } = window.NbUI
    
    createApp({}).use(NbUI).mount('#app')
  </script>
</body>
</html>

查看完整使用文档了解详细的组件使用方法和 API。

🎯 组件演示

启动开发服务器后，访问 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 框架
Vite 7.1.7 - 下一代前端构建工具
@vitejs/plugin-vue - Vue 3 单文件组件支持
vite-plugin-vue-devtools - Vue 开发者工具

🎨 设计理念

NB-UI 遵循以下设计原则：

简洁 - 保持组件的简洁性和易用性
灵活 - 提供丰富的配置选项和插槽
美观 - 精心设计的视觉效果和交互体验
高效 - 轻量级实现，性能优先

📝 开发计划

[ ] Input 输入框
[ ] Select 选择器
[ ] Radio 单选框
[ ] Checkbox 复选框
[ ] Switch 开关
[ ] Dialog 对话框
[ ] Message 消息提示
[ ] Table 表格
[ ] Pagination 分页
[ ] Form 表单

📤 发布到 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