Vue 功能组件库

一个集成了多种实用组件的Vue 3组件库，提供开箱即用的功能组件。

🚀 组件列表

API请求工具

功能强大的API请求测试工具，类似Postman，支持多种请求方式、参数配置和响应查看。

特性：

• 多种请求方法（GET、POST、PUT、DELETE、PATCH）
• 完整的请求配置（URL、请求头、请求体、查询参数）
• 多种请求体格式（JSON、Form Data、x-www-form-urlencoded、Raw）
• 实时响应查看（响应体、响应头、实际请求信息）
• 多标签页管理
• 请求保存和管理
• cURL导入功能
• 认证支持（Basic Auth）
• 超时设置
• 前置/后置脚本
• 布局切换

即将推出

• 数据可视化组件
• 表单构建器
• 代码编辑器
• 系统监控组件

📦 安装

npm install data-net-web-components

🎯 使用

完整引入

import { createApp } from 'vue'
import DataNetWebComponents from 'data-net-web-components'
import 'data-net-web-components/dist/style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(DataNetWebComponents)

按需引入

import { ApiRequestTool } from 'data-net-web-components'
import 'data-net-web-components/dist/style.css'

export default {
  components: {
    ApiRequestTool
  }
}

在模板中使用

<template>
  <div>
    <ApiRequestTool />
  </div>
</template>

🛠️ 开发

安装依赖

npm install

启动开发服务器

npm run dev

构建组件库

npm run build:lib

预览构建结果

npm run preview

📁 项目结构

src/
├── components/           # 组件目录
│   ├── ApiRequestTool.vue
│   └── CurlImportDialog.vue
├── views/               # 页面目录
│   ├── Home.vue
│   └── ApiRequestToolPage.vue
├── router/              # 路由配置
│   └── index.js
├── index.js             # 组件库入口
├── App.vue              # 根组件
└── main.js              # 应用入口

🔧 技术栈

• Vue 3 - 渐进式JavaScript框架
• Element Plus - Vue 3组件库
• Vite - 构建工具
• Vue Router - 路由管理
• Axios - HTTP客户端

📝 更新日志

v1.0.0

• 初始版本发布
• API请求工具组件
• 组件库架构搭建
• 支持npm安装和按需引入

📄 许可证

MIT License

🤝 贡献

欢迎提交Issue和Pull Request来帮助改进这个组件库。

📞 联系方式

如有问题或建议，请通过以下方式联系：

• GitHub Issues: 项目地址
• Email: [email protected]