开发 Vue 组件库并发布到 npm 的核心是结构清晰、入口明确、构建适配、发布规范，需按组件组织与导出、构建配置、package.json 配置、登录校验发布四环节执行。
开发 Vue 组件库并发布到 npm，核心在于结构清晰、入口明确、构建适配、发布规范。不是把组件扔进项目就能发，而是要让使用者无论用 import、Vue.use() 还是 CDN 引入，都能无缝使用。整个流程可拆解为四个关键环节。
组件组织与导出设计
组件应按功能或业务域分目录存放，避免混在 src/ 主应用代码中。推荐结构：
-
packages/button/→ 单个组件目录，含Button.vue和index.js -
packages/input/→ 同上 -
packages/index.js→ 统一导出所有组件，提供install方法供全局注册 -
src/index.ts（或index.js）→ 库的主入口，仅做默认导出，不包含业务逻辑
每个组件的 index.js 需定义 install 方法，例如：
import Button from './Button.vue'
Button.install = (app) => { app.component(Button.name, Button) }
export default Button
Vite 或 Webpack 构建配置
现代 Vue 组件库多用 Vite 打包，需在 vite.config.ts 中启用库模式：
立即学习“前端免费学习笔记（深入）”；
-
build.lib指定入口文件（如src/index.ts）和包名 -
build.rollupOptions.external排除vue，声明为peerDependencies - 输出格式需同时支持
cjs、esm和类型声明（.d.ts） - 样式建议内联（
css: { extract: false }），避免用户额外引入 CSS 文件
若用 Vue CLI，命令为：vue-cli-service build --target lib --name your-lib src/index.js
package.json 与发布准备
这是 npm 能识别并正确安装的关键配置：
-
name必须小写、无空格、不含大写字母（如@org/my-button） -
main、module、types分别指向 CJS、ESM 和类型文件路径 -
files字段显式声明发布内容（如["dist", "types", "README.md"]），避免源码泄露 -
.npmignore排除/src、/tests、.git等非必要文件 -
peerDependencies声明"vue": "^3.4.0"，不重复安装 Vue
构建后检查 dist/ 目录是否生成了 index.esm.js、index.cjs.js 和 index.d.ts。
登录、校验与发布
发布前务必完成三步验证：
- 运行
npm login登录账号（首次需邮箱验证） - 执行
npm whoami确认当前身份 - 本地测试：新建空项目，
npm install ../your-lib或npm pack后npm install xxx.tgz
确认无误后执行 npm publish。后续更新版本请先运行 npm version patch（或 minor/major），再 npm publish。首次发布若用组织名（@org/name），需确保已加入该组织并有发布权限。
