快速开始
几分钟把 KunUI 接入你的 Vue / Nuxt 项目。
安装(Nuxt)
pnpm add @kungal/ui-nuxt @kungal/ui-vue @kungal/ui-core @kungal/ui-tokens tailwindcss @tailwindcss/vite在 nuxt.config 中 extends 这个 Layer,并配置 CSS 入口:
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@kungal/ui-nuxt'],
css: ['~/assets/css/main.css'],
vite: { plugins: [tailwindcss()] },
})app/assets/css/main.css:
@import 'tailwindcss';
@import '@kungal/ui-tokens';
@import '@kungal/ui-vue/style.css';
/* 生成组件用到的工具类(路径相对本文件,指向 node_modules) */
@source '../../node_modules/@kungal/ui-vue';
@source '../../node_modules/@kungal/ui-core';安装(纯 Vue)
pnpm add @kungal/ui-vue @kungal/ui-core @kungal/ui-tokens tailwindcss @tailwindcss/viteimport { createApp } from 'vue'
import { KunUI } from '@kungal/ui-vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).use(KunUI).mount('#app')main.css 与 Nuxt 相同(tailwindcss + @kungal/ui-tokens + @kungal/ui-vue/style.css + 两条 @source)。
挂载反馈 Provider(可选)
若用到 toast / 确认弹窗 / 看板娘,在应用根部各挂载一次:
<!-- 在 app.vue 等应用根部各挂载一次 -->
<KunMessageProvider />
<KunAlertProvider />
<KunLoliProvider />核心规则
HTML 永不被 sanitize
把不可信 HTML 传给 KunContent 或 richText 消息前,请自行 sanitize(如 DOMPurify)。KunUI 不内置任何 sanitizer。
图标全部内置,绝不联网获取
KunIcon 从注册表渲染内联 SVG,运行时不调用 Iconify。自定义图标用 @kungal/ui-core 的 registerKunIcon(s) 注册。
Tailwind 入口由你自己拥有
应用 CSS 需 import tailwindcss + @kungal/ui-tokens + @kungal/ui-vue/style.css,并 @source 这些包;pnpm 下三者需作为直接依赖安装。
暗色模式
在 <html> 上切换 kun-dark-mode 类即可:
document.documentElement.classList.toggle('kun-dark-mode', isDark)