当前位置：首页 > news >正文

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

news 2025/7/17 9:25:19

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

🚀从零发布一个 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 和 UMDfileName: (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 项目中使用

<template><MyButton type="primary" @click="handleClick">Click Me</MyButton>
</template><script setup>
import MyButton from '@your-username/my-vue-button';const handleClick = () => {alert('Button clicked!');
};
</script>

🔁七、更新组件版本

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

# 修改 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️⃣	更新版本并发布