KUI for Vue.js

邱秋 • 2017年12月20日 • 阅读：69820 • vue javascript

KUI Vue

面向 Vue 3 的现代 TypeScript UI 组件库。

70+ 精心设计的组件 · 明暗主题 · 支持 SSR 与 Nuxt · 灵活的设计 Token

文档 · 快速开始 · 组件总览 · 暗色模式 · 问题反馈

English · 简体中文

pnpm add kui-vue

特性

70+高质量组件
国际化支持 14 种语言
使用TypeScript开发
支持Vue3.x
支持 SSR
支持 Nuxt.js
支持 Electron

文档

安装

使用 pnpm：

pnpm add kui-vue

也可以使用 npm、Yarn 或 Bun：

npm install kui-vue
yarn add kui-vue
bun add kui-vue

使用脚本标记进行全局使用：

<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/kui-vue/style/index.css" />
<!-- import kui -->
<script src="//unpkg.com/kui-vue"></script>

使用

<template>
  <div>
    <k-button type="primary" @click="test">Primary</k-button>
  </div>
</template>
<script setup lang="ts">
  import { message } from "kui-vue";
  const test = () => {
    message.info("Hello kui !");
  };
</script>

本地开发

git clone git@github.com:smallerqiu/kui-vue.git
cd kui-vue
pnpm install
pnpm dev

文档开发服务器默认运行在 http://localhost:7005。

常用命令：

pnpm dev          # 启动文档开发服务器
pnpm typecheck    # TypeScript 类型检查
pnpm build:docs   # 构建文档站
pnpm build        # 构建组件库及样式

浏览器支持

支持主流现代浏览器的最近两个版本，包括 Chrome、Edge、Firefox 和 Safari；不支持 Internet Explorer。

AI 辅助开发

Kui Vue 随版本发布组件 metadata、Agent Skill 和 MCP 服务，让 AI 编程工具根据真实公开 API 生成代码，而不是猜测属性。

pnpm exec kui-vue-ai init
pnpm exec kui-vue-mcp

AI 索引：https://k-ui.cn/llms.txt
完整 AI 文档：https://k-ui.cn/llms-full.txt
npm 组件数据：kui-vue/metadata
组件数据 Schema：kui-vue/metadata/schema
Agent Skill：kui-vue/skill
完整接入指南

参与贡献

欢迎提交 Issue 和 Pull Request。在提交代码前，请确保类型检查和相关构建能够通过。

开源协议

MIT

我，秦始皇，打钱！