企业级vue组件库需通过pnpm workspace初始化monorepo，配置typescript/volar/eslint开发环境，规范props/emits/透传/无障碍，构建多格式产物，并发布至npm仓库。
一、初始化Monorepo工作区
企业级组件库需支持多包协同开发与独立发布，采用pnpm workspace管理是当前主流实践。该结构可隔离组件、工具函数、主题系统等子模块，避免依赖冲突并提升调试效率。
1、全局安装pnpm：执行npm install -g pnpm。
2、创建空项目目录，运行pnpm init生成根package.json，并设置"private": true。
3、在项目根目录新建pnpm-workspace.yaml，写入：packages:<br> - 'packages/**'<br> - 'docs'<br> - 'examples'。
4、在packages/下分别创建components、hooks、utils子目录，并为每个目录执行pnpm init生成独立package.json。
二、配置组件开发环境
为保障类型安全与开发体验，需统一集成TypeScript、Volar插件支持及ESLint校验规则。组件源码应基于Composition API编写，并严格遵循语义化命名与单一职责原则。
1、在packages/components中安装依赖：pnpm add -D typescript vue@^3.4 vite @volar/vue-language-plugin。
2、创建tsconfig.json，启用"strict": true与"skipLibCheck": true，并配置"types": ["vue"]。
3、添加.eslintrc.cjs，继承@vue/eslint-config-typescript，强制要求props接口定义、emit事件命名以on-开头。
4、在vite.config.ts中配置build.lib模式，入口设为src/index.ts，formats指定["es", "cjs"]。
三、实现组件基础能力规范
每个组件必须提供明确的props契约、插槽扩展点与事件触发机制，同时支持原生属性透传与无障碍访问属性自动继承，这是保障可复用性与可访问性的前提。
1、在组件<script setup="" lang="ts"></script>中使用withDefaults(defineProps<t>())</t>声明带默认值的强类型props。
2、通过defineEmits<t>()</t>显式定义事件签名，禁止使用any类型emit参数。
3、在模板根元素上绑定v-bind="$attrs"，确保class、style、id等原生属性自动透传。
4、为所有交互控件添加role、aria-*属性，按钮类组件必须支持tabindex与键盘回车/空格触发。
四、构建多格式产物
企业级组件库需同时输出ESM、CJS与类型声明文件，以适配不同构建工具链（Vite、Webpack、Rollup）及Node.js环境下的按需引入需求。
1、在packages/components的package.json中配置："main": "dist/index.cjs.js","module": "dist/index.es.js","types": "dist/index.d.ts","exports": { ".": { "import": "./dist/index.es.js", "require": "./dist/index.cjs.js" } }。
2、执行pnpm build（对应vite build --lib --outDir dist），生成压缩版与未压缩版双版本ES/CJS文件。
3、启用rollup-plugin-dts插件，在构建流程末尾自动生成完整index.d.ts，合并所有组件类型定义。
4、验证产物完整性：运行node -e "console.log(require('./dist/index.cjs.js'))"确认CJS可正常加载。
五、发布至npm私有或公共仓库
发布前需完成版本号递增、Git标签打标、LICENSE声明及README完善，确保消费者能无歧义地识别包用途、兼容范围与使用方式。
1、在packages/components中执行pnpm version minor更新版本号并生成Git commit与tag。
2、检查package.json中"publishConfig"字段：
若为私有库，设置"registry": "https://your-verdaccio.internal/"；
若为公开库，确保"access": "public"且已登录npm login。
3、执行pnpm publish --no-git-checks，跳过Git状态检查直接发布，注意：必须确保dist目录已存在且包含全部构建产物。
4、发布后立即在另一空项目中验证：pnpm add your-component-library@latest，然后尝试import { Button } from 'your-component-library'并启动本地服务。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
