整理不易，如果本文對你有幫助，歡迎點個【贊 👍】+【收藏 ?】+【關注 🧡】
📦Vue 組件庫發布實戰（含 TypeScript 支持）
在上一篇中我們完成了一個基礎 Vue 3 組件的 npm 發布流程。本文將升級內容，帶你完成一個支持 TypeScript 和多個組件的 Vue 組件庫發布流程，適合想要長期維護 UI 庫或工程化封裝的你！
🔧一、項目初始化（TS + Vite）
① 創建目錄并初始化項目
mkdir vue-ui-lib
cd vue-ui-lib
pnpm init -y
② 安裝開發依賴
pnpm add vue@^3
pnpm add vite vue-tsc @vitejs/plugin-vue -D
pnpm add typescript -D
③ 初始化 TypeScript 配置
npx tsc --init
并編輯 tsconfig.json：
{"include": ["src"],"exclude": ["node_modules", "dist"],"compilerOptions": {"target": "ESNext","module": "ESNext","moduleResolution": "Node","declaration": true,"declarationDir": "dist/types","outDir": "dist","strict": true,"esModuleInterop": true,"skipLibCheck": true,"jsx": "preserve","lib": ["ESNext", "DOM"]}
}
📁二、組件結構設計（多組件支持）
推薦結構：
src/components/Button/index.tsButton.vueInput/index.tsInput.vueindex.ts
示例組件：Button.vue
<template><button class="btn" @click="onClick"><slot /></button>
</template><script lang="ts" setup>
defineProps<{onClick?: () => void
}>()
</script><style scoped>
.btn {padding: 8px 16px;background-color: #409eff;color: white;border-radius: 4px;border: none;cursor: pointer;
}
</style>
對應的 index.ts
import Button from './Button.vue'
export default Button
根入口 src/index.ts
export { default as MyButton } from './components/Button'
export { default as MyInput } from './components/Input'
// 添加更多組件時，繼續擴展
🏗?三、配置 Vite 構建為組件庫
創建 vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({plugins: [vue()],build: {lib: {entry: path.resolve(__dirname, 'src/index.ts'),name: 'MyUILib',fileName: (format) => `my-ui-lib.${format}.js`,formats: ['es', 'umd']},rollupOptions: {external: ['vue'],output: {globals: {vue: 'Vue'}}}}
})
🧾四、配置 package.json
{"name": "@your-username/vue-ui-lib","version": "1.0.0","main": "dist/my-ui-lib.umd.js","module": "dist/my-ui-lib.es.js","types": "dist/types/index.d.ts","files": ["dist"],"peerDependencies": {"vue": "^3.0.0"},"scripts": {"build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist/types","prepublishOnly": "pnpm run build"}
}
🚀五、構建 & 發布組件庫
① 構建產物
pnpm run build
- 生成
dist/*.js（構建好的 JS） - 生成
dist/types（類型聲明）
② 登錄并發布
pnpm login
pnpm publish
? 包發布成功后，即可被安裝使用：
pnpm add @your-username/vue-ui-lib
🧪六、在項目中使用你的組件庫
<template><MyButton @click="sayHi">Hello</MyButton>
</template><script setup lang="ts">
import { MyButton } from '@your-username/vue-ui-lib'const sayHi = () => alert('Hi from UI lib!')
</script>
📦七、如何持續更新和擴展
| 場景 | 操作 |
|---|---|
| ? 添加新組件 | 在 components/ 下新建文件夾，并導出 |
| 🔁 更新版本 | 修改 package.json 中的 version |
| 📦 重新發布 | pnpm run build && pnpm publish |
📚總結回顧
| 步驟 | 內容 |
|---|---|
| 1?? | 初始化 TS + Vite 項目 |
| 2?? | 編寫 Vue 3 組件結構，支持多組件 |
| 3?? | 配置 Vite 構建和類型輸出 |
| 4?? | 設置 package.json，準備發布 |
| 5?? | 構建并發布到 npm |
| 6?? | 在其他項目中測試使用 |
| 7?? | 持續維護和擴展版本 |
👏 這樣一個支持 TypeScript 的 Vue 組件庫就發布完成啦！可以無限擴展和維護。
