Vue 组件库发布实战（含 TypeScript 支持）

整理不易，如果本文对你有帮助，欢迎点个【赞 👍】+【收藏 ⭐】+【关注 🧡】

📦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.ts
      Button.vue
    Input/
      index.ts
      Input.vue
  index.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>

📦七、如何持续更新和扩展

📚总结回顾

👏 这样一个支持 TypeScript 的 Vue 组件库就发布完成啦！可以无限扩展和维护。