深入解析：从零发布一个 Vue 3 Button 组件到 npm（基于 Vite）

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

从零发布一个 Vue 3 Button 组件到 npm（基于 Vite）

今天我们来实战一个完整流程：如何将一个 Vue 3 Button 组件打包并发布到 npm，这样你就可以在任意 Vue 项目中通过 npm install 引用它，完全开源复用，流程简单明了，适合初学者和想封装自己 UI 库的朋友。

---

一、创建项目并初始化

① 创建项目目录

mkdir my-vue-button
cd my-vue-button

② 初始化 package.json

npm init -y
# 或使用 pnpm：
pnpm init -y

③ 安装 Vue 3 和 Vite

npm install vue@next
npm install vite @vitejs/plugin-vue --save-dev
# 或使用 pnpm：
pnpm add vue@next
pnpm add vite @vitejs/plugin-vue --save-dev

---

二、编写 Button 组件

① 创建组件文件夹

mkdir src
touch src/Button.vue

② 编写 src/Button.vue

<template>
  <button
    :class="['my-button', { 'primary': type === 'primary' }]"
    @click
  ="onClick"
  >
<slot></slot>
</button>
</template>
<script setup>
defineProps({
type: {
type: String,
default: 'default'
, // 'default' | 'primary'
}
,
onClick: {
type: Function,
default: (
) =>
{
}
,
}
,
}
)
</script>
<style scoped>
.my-button {
padding: 8px 16px;
border: none;
border-radius: 4px;
background: #f0f0f0;
cursor: pointer;
}
.primary {
background: #409eff;
color: white;
}
</style>

功能说明：

• ✅ 支持 type 属性（default 或 primary）
• ✅ 支持 <slot> 自定义内容
• ✅ 支持 onClick 点击事件

---

⚙️三、配置构建工具（Vite）

① 创建 vite.config.js

import {
defineConfig
}
from 'vite'
;
import vue from '@vitejs/plugin-vue'
;
export
default defineConfig({
plugins: [vue(
)]
,
build: {
lib: {
entry: 'src/Button.vue'
, // 入口文件
name: 'MyButton'
, // 全局变量名（UMD 格式使用）
formats: ['es'
, 'umd']
, // 构建格式：ESM 和 UMD
fileName: (format
) =>
`button.${format
}.js`
, // 输出文件名
}
,
rollupOptions: {
external: ['vue']
, // 排除 Vue（宿主项目提供）
output: {
globals: {
vue: 'Vue'
, // 映射为全局变量 Vue
}
,
}
,
}
,
}
,
}
)
;

---

② 修改 package.json 构建脚本

"scripts": {
"build": "vite build"
,
"prepublishOnly": "npm run build"
}

---

③ 运行构建测试

npm run build

✅ 构建成功后将在 dist/ 生成以下文件：

• button.es.js（ES Module 格式）
• button.umd.js（兼容老项目）

---

四、配置 npm 发布信息

修改 package.json，确保包含以下字段：

{
"name": "@your-username/my-vue-button"
,
"version": "1.0.0"
,
"description": "A simple Vue 3 Button component"
,
"main": "dist/button.es.js"
,
"module": "dist/button.es.js"
,
"unpkg": "dist/button.umd.js"
,
"files": ["dist"]
,
"peerDependencies": {
"vue": "^3.0.0"
}
,
"devDependencies": {
"vite": "^4.0.0"
,
"@vitejs/plugin-vue"
: "^4.0.0"
}
}

关键点说明：

字段	说明
name	推荐使用 @作用域/组件名 避免命名冲突
peerDependencies	声明使用 Vue，但不重复打包
files	指定只发布 dist 构建产物

---

五、发布到 npm

① 登录 npm

npm login
# 或：
pnpm login

输入用户名、密码和邮箱即可登录。

---

② 发布组件包

npm publish
# 或：
pnpm publish

注意事项：

• 首次发布版本建议从 1.0.0 开始
• 若提示包名已存在，可改用别的作用域或名称

---

六、测试使用你的组件

① 在其他项目中安装

npm install @your-username/my-vue-button
# 或：
pnpm add @your-username/my-vue-button

② 在 Vue 项目中使用

Click Me
import MyButton from '@your-username/my-vue-button';
const handleClick = () => {
  alert('Button clicked!');
};

---

七、更新组件版本

每次发布新版本时，请修改版本号并重新构建：

# 修改 package.json 中的 version（如 1.0.1）
npm run build
npm publish

---

完整流程总结

步骤	操作
1️⃣	创建项目并初始化 package.json
2️⃣	编写 Button.vue 组件
3️⃣	配置 vite.config.js 构建工具
4️⃣	编辑构建脚本和发布信息
5️⃣	登录并发布到 npm
6️⃣	测试在其他项目中安装使用
7️⃣	更新版本并发布

---

到这里，你就完成了从 0 到发布 Vue 组件到 npm 的完整流程！是不是很简单？如果你还想继续发布更多组件，甚至封装成一个组件库，也可以按照这个流程反复使用！

有问题欢迎评论提问，我会尽量解答！