Vue 组件库从创建到发布全流程

创建项目

使用以下命令创建项目目录并初始化 package.json：

bash 复制代码

mkdir my-vue-crud-lib
cd my-vue-crud-lib
npm init -y

目录结构建议

复制代码

my-vue-crud-lib/
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
├─ src/
│  ├─ index.ts
│  ├─ components/
│  │   └─ DynamicCrudForm.vue
│  └─ types/
│      └─ index.d.ts
└─ README.md

注意事项

index.ts 必须导出组件
components 存放所有 Vue 组件
使用 TypeScript 时需创建类型声明文件

安装依赖

安装核心依赖：

bash 复制代码

npm install vue@3 element-plus

安装开发依赖：

bash 复制代码

npm install -D vite @vitejs/plugin-vue vue-tsc typescript vite-plugin-dts

注意事项

Vue 和 ElementPlus 应声明为 peerDependencies
开发依赖包含构建工具和类型相关插件

配置 TypeScript

tsconfig.json 配置示例：

json 复制代码

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "declaration": true,
    "declarationDir": "dist/types",
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

关键配置项

declaration: true 生成类型声明文件
skipLibCheck: true 避免第三方库类型冲突

编写组件

组件入口文件示例：

ts 复制代码

// src/index.ts
import DynamicCrudForm from './components/DynamicCrudForm.vue';

export { DynamicCrudForm };
export default { DynamicCrudForm };

组件开发规范

使用 <script setup lang="ts"> 语法
通过 defineEmits 声明事件
使用 Composition API 组织逻辑

配置 Vite 打包

vite.config.ts 配置示例：

ts 复制代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [vue(), dts()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyVueCrudLib',
      formats: ['es', 'umd']
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: { vue: 'Vue' }
      }
    }
  }
});

关键配置

external 排除外部依赖
vite-plugin-dts 自动生成类型声明
输出 ESM 和 UMD 格式

构建与发布

构建命令：

bash 复制代码

npm run build

发布流程：

更新 package.json 版本号
登录 npm 账户：

bash 复制代码

npm login

发布包：

bash 复制代码

npm publish --access public

发布注意事项

确保 main 和 module 字段指向正确文件
版本号遵循 semver 规范
首次发布需使用 --access public

使用组件库

安装依赖：

bash 复制代码

npm install my-vue-crud-lib element-plus

全局注册：

ts 复制代码

import { createApp } from 'vue';
import MyVueCrudLib from 'my-vue-crud-lib';

createApp(App).use(MyVueCrudLib).mount('#app');

使用建议

推荐按需导入组件
注意 peerDependencies 版本匹配
提供完整的类型提示

常见问题处理

类型声明缺失

检查 vite-plugin-dts 是否正常工作
手动添加类型声明文件

样式未生效

确认已导入 ElementPlus 样式
检查组件库的样式加载顺序

版本冲突

保持 Vue 版本一致
使用 peerDependencies 声明兼容版本