@kingfwd/element

A modern, lightweight Vue 3 component library.

📦 安装

# 安装
npm install @kingfwd/element

# 或使用 yarn
pnpm add @kingfwd/element

🚀 快速开始

全局注册

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VKelement from '@kingfwd/element'
import '@kingfwd/element/dist/vk-element.css'

const app = createApp(App)
app.use(VKelement)
app.mount('#app')

按需引入

// 引入组件和样式
import { Button, Input } from '@kingfwd/element'
import '@kingfwd/element/dist/vk-element.css'

// 在组件中使用
export default {
  components: {
    VkButton: Button,
    VkInput: Input
  }
}

📖 组件列表

| 组件 | 说明 | |------|------| | Button | 按钮 | | Input | 输入框 | | Select | 选择器 | | Switch | 开关 | | Form | 表单 | | Message | 消息提示 | | Tooltip | 提示框 | | DropDown | 下拉菜单 | | Collapse | 折叠面板 | | Icon | 图标 |

🎨 主题定制

组件库使用 CSS 变量实现主题定制，可通过覆盖以下变量来修改样式：

:root {
  --vk-primary-color: #409eff;
  --vk-success-color: #67c23a;
  --vk-warning-color: #e6a23c;
  --vk-danger-color: #f56c6c;
  --vk-info-color: #909399;
}

📄 文档

• 开发文档：npm run docs:dev
• 构建文档：npm run docs:build

🔧 开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run dev

# 构建
pnpm run build

# 类型检查
pnpm run type-check

# 代码格式化
pnpm run format

# 代码检查
pnpm run lint

🤝 贡献

欢迎提交 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

📜 许可证

MIT

🌟 支持

如果这个项目对你有帮助，请给个 Star ⭐ 支持一下！