在 macos 上开发发布前端组件库需确保结构清晰、导出合理、构建干净、发布可靠：src 分层管理，main.ts 统一入口，playground 本地调试，vite 构建多格式模块，unocss 处理样式，npm publish 发布。
在 macos 上开发并发布前端组件库，核心是把“可被他人 import 的包”做对：结构清晰、导出合理、构建干净、发布可靠。整个流程不依赖特定框架，但需兼顾本地调试、按需加载和生产可用性。
初始化项目结构
组件库不是普通应用，目录要体现“被引用”的定位：
- src/ 下分层明确：components（业务组件）、directives（指令）、utils（纯函数）、modules（i18n/主题等）
- main.ts 是唯一入口，统一导出组件、指令、Composables，并引入基础样式（如 UnoCSS 重置 + 虚拟样式表）
- playground/ 是本地调试用的示例 Vue/React 项目，改完组件立刻能预览效果
- dist/ 不提交，只在构建后生成，作为最终发布的产物目录
本地开发与调试
高效迭代的关键在于“改即见”：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在 playground/ 中用 Vite 启动一个轻量示例页，通过
npm link或pnpm link将本地组件库链接进去 - 修改 src/ 任意文件后，playground 页面自动热更新，无需重新 install
- 建议在 package.json 中配置
"dev": "pnpm --filter playground dev"，一键启动调试环境
构建与打包配置
构建目标不是单个 HTML，而是供其他项目直接使用的 ESM/CJS 模块：
- 使用 Vite 或 Rollup 配置多格式输出（es、cjs、umd），在
vite.config.ts中指定build.lib模式 - 导出路径需兼容 tree-shaking：每个组件单独导出（
export { Button } from './components/Button'），同时提供默认导出对象（export * from './components'） - 样式处理推荐 UnoCSS 或 Tailwind 的原子化方案，避免提取 CSS 文件，直接内联或由使用者控制
发布到 npm
发布前确保版本语义化、文档可读、类型完整：
- 运行
pnpm build生成 dist/，检查输出是否包含package.json、index.d.ts、index.js等必要文件 - 在根目录
package.json中设置："types": "dist/index.d.ts"、"module": "dist/index.js"、"exports"字段声明不同环境入口 - 登录 npm（
npm login），然后执行npm publish --access public；首次发布建议加--dry-run预览内容
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
