！警告 本项目处于早期阶段，并将不断发展。请期待频繁的更新和潜在的变更。欢迎提供反馈！
功能
- 轻松设置：简单的设置过程和最少的维护，让您专注于构建组件。
- 无需故事：直接分析您的组件代码，无需编写故事。
- 快速：基于 Vite 构建，实现快速开发和即时反馈，提高生产力。
- DevTools 集成：与 Vue 和 Nuxt devtools 集成，提供统一的开发体验。
- UI 库集成：与流行的 UI 库集成，展示本地安装组件的示例。
- 代码生成：根据组件 props 生成最新的模板代码，可即时复制和使用。
安装
Nuxt
npx nuxi@latest module add --dev compodium
Vue
- 安装
@compodium/vue
pnpm
pnpm add -D @compodium/vue
yarn
yarn add --dev @compodium/vue
npm
npm install --save-dev @compodium/vue
bun
bun add -D @compodium/vue
- 在您的
vite.config.ts中添加 Compodium 插件
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import { compodium } from '@compodium/vue'
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
compodium()
]
})
- 在您的
tsconfig.app.json中包含 compodium 类型
tsconfig.app.json
{
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"node_modules/@compodium/vue/dist/index.d.ts"
],
}
贡献
欢迎贡献！♥️
目前，您可以贡献的一种方式是为您喜爱的组件库添加示例。您可以在此处找到 Nuxt UI 集合和示例。
本地开发
# Install dependencies
pnpm install
# Generate type stubs
pnpm dev:prepare
# Develop with the playground
pnpm dev
# Run ESLint
pnpm lint
# Run typechecks
pnpm typechecks
# Run Vitest
pnpm test