从零打造一个Vue 3组件库：开发、打包与发布到NPM

作为一名前端开发者，开发一个自己的Vue 3组件库不仅能提升技术能力，还能为社区贡献力量。本文将带你从零开始，基于Vue
3和Vite，开发一个简单的UI组件库（包含一个按钮组件），并打包发布到NPM。文章涵盖项目搭建、组件开发、按需加载支持、测试与发布的全流程，适合想进阶Vue
3开发的你！欢迎关注我的博客和公众号（微信搜索：小贺前端笔记），更多干货和实战项目等你来发现！

为什么开发Vue 3组件库？

• 技术提升：深入理解Vue 3的响应式系统和组件封装。
• 项目复用：在多个项目中复用高质量组件，提升效率。
• 社区贡献：发布到NPM，获得社区反馈，积累个人影响力。

1. 项目初始化

我们使用Vite作为构建工具，因为它对Vue 3支持优秀，速度快且配置简单。

1.1 创建项目

npm create vite@latest my-vue3-ui --template vue
cd my-vue3-ui
npm install

1.2 安装必要依赖

组件库需要支持样式封装和按需加载，安装以下依赖：

npm install -D vite-plugin-dts @vitejs/plugin-vue sass

• vite-plugin-dts：生成TypeScript类型声明文件。
• @vitejs/plugin-vue：支持Vue单文件组件。
• sass：用于编写组件样式。

1.3 项目结构

创建一个清晰的目录结构，便于维护：

my-vue3-ui/
├── src/
│   ├── components/         # 组件目录
│   │   └── Button.vue      # 示例按钮组件
│   ├── index.ts            # 组件库入口
│   └── styles/             # 全局样式
│       └── index.scss      # 全局样式入口（可选）
├── vite.config.ts          # Vite配置文件
├── package.json
└── README.md

2. 开发一个按钮组件

我们以一个简单的Button组件为例，支持type（primary/success）和disabled属性。

2.1 创建Button.vue

在src/components/Button.vue中编写组件代码：

• 变更：移除 scoped 属性，确保样式可以被 Vite 提取到全局 CSS 文件（dist/style.css）。
• 使用

  运行 npm run dev，检查按钮的样式和功能是否正常（蓝色主按钮、绿色成功按钮、灰色禁用状态）。

  5.2 本地链接测试

  使用 npm link 测试组件库：

  1. 在组件库目录运行：

     npm run build
     npm link
     

  2. 创建一个新的 Vue 3 测试项目（如果没有）：

     npm create vite@latest test-project --template vue
     cd test-project
     npm install
     

  3. 在测试项目中运行：

     npm link my-vue3-ui
     

  4. 在测试项目的 src/main.ts 中导入并使用：

     import { createApp } from 'vue';
     import App from './App.vue';
     import MyVue3UI from 'my-vue3-ui';
     import 'my-vue3-ui/dist/style.css';
     
     const app = createApp(App);
     app.use(MyVue3UI);
     app.mount('#app');
     

  5. 在测试项目的 src/App.vue 中使用组件：

  6. 运行测试项目：

     npm run dev
     

     验证按钮是否显示正确样式。

  6. 发布到NPM

  6.1 登录NPM

  确保你有NPM账号，运行：

  npm login
  

  6.2 打包与发布

  npm run build
  npm publish --access public
  

  6.3 注意事项

  • 确保 package.json 中的 name 唯一（建议改为 @yourname/my-vue3-ui）。
  • 发布前运行 npm run build，检查 dist 目录是否包含 my-vue3-ui.es.js、my-vue3-ui.umd.js、style.css 和 index.d.ts。
  • 更新版本号（npm version patch）后重新发布。

  你在开发Vue组件库时遇到过哪些问题？欢迎在评论区分享你的经验！

  相关推荐

  想深入学习Vue 3和前端开发？以下是几篇值得一读的文章：
  Vue 3 中的新特性：Suspense和Teleport
  从初级到高级前端：如何写出高质量代码，迈向职业新高度