！警告 本專案處於早期階段，並將不斷發展。請期待頻繁的更新和潛在的變更。歡迎提供反饋！
功能
- 輕鬆設定：簡單的設定過程和最少的維護，讓您專注於構建元件。
- 無需故事：直接分析您的元件程式碼，無需編寫故事。
- 快速：基於 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