当前位置：首页 > news >正文

开发组件库【详细教程】含同时支持【完整引入】和【手动导入】，核心配置文件，本地调试，依赖的安装和声明，发布组件库等

news 2025/9/3 5:45:53

项目目录

├─ 📁src
│  ├─ 📁components
│  │  └─ 📄Button.vue
│  ├─ 📁demo
│  │  ├─ 📄App.vue
│  │  └─ 📄main.ts
│  ├─ 📄env.d.ts
│  └─ 📄index.ts
├─ 📄.gitignore
├─ 📄index.html
├─ 📄package.json
├─ 📄tsconfig.json
└─ 📄vite.config.ts

以下目录/文件是为了方便本地调试/提供使用范例

index.html
src/demo

同时支持【完整引入】和【手动导入】

src/index.ts

import { App } from "vue";// 导入组件
import sButton from "./components/Button.vue";const componentDic = { sButton };// 导出命名组件，便于【手动导入】组件
export { sButton };// 默认导出一个安装函数，便于 app.use 全量注册组件
export default {install: (app: App) => {Object.entries(componentDic).forEach(([key, value]) => {app.component(key, value);});},
};

核心配置文件

src/vue-ts.d.ts

方便 ts 识别 vue 文件

declare module "*.vue" {import type { DefineComponent } from "vue";const component: DefineComponent<{}, {}, any>;export default component;
}

.gitignore

指定 git 提交时忽略的文件/文件夹

node_modules/
dist/

package.json

指定包名、脚本等关键信息，各字段含义参考
https://blog.csdn.net/weixin_41192489/article/details/150345315

{"name": "@ecclub/sui","version": "1.0.0","type": "module","main": "./dist/index.umd.cjs","module": "./dist/index.js","types": "./dist/index.d.ts","description": "组件库SUI","files": ["dist","index.d.ts"],"scripts": {"dev": "vite","build": "tsc && vite build --watch"},"keywords": ["组件库SUI"],"author": "朝阳 <603092378@qq.com>","license": "MIT","devDependencies": {"@types/node": "^24.3.0","@vitejs/plugin-vue": "^6.0.1","typescript": "~5.9.2","vite": "^7.0.6","vite-plugin-dts": "^4.5.4","vue-tsc": "^3.0.6"},"peerDependencies": {"element-plus": "^2.11.1","vue": "^3.5.20"}
}

tsconfig.json

ts 的必要配置

{"compilerOptions": {"target": "es2022","useDefineForClassFields": true,"module": "esnext","lib": ["ES2022", "DOM", "DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"isolatedModules": true,"moduleDetection": "force","noEmit": true,/* 路径别名配置 */"baseUrl": ".","paths": {"@/*": ["./src/*"]},/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true,/* Vue 支持配置 */"jsx": "preserve","types": ["vite/client", "vue"]},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

vite.config.ts

vite 的必要配置
(若非基于 element-plus 二次开发的组件库，删除相关配置即可 )

import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import vue from "@vitejs/plugin-vue";
import path from "path";export default defineConfig({build: {lib: {entry: "./src/index.ts",name: "index",fileName: "index",},rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: ["vue", "element-plus"],output: {// 在UMD构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: "Vue","element-plus": "ElementPlus",},},},},plugins: [vue(),dts({// 生成类型声明文件insertTypesEntry: true,}),],resolve: {// 配置路径别名alias: {"@": path.resolve(__dirname, "./src"),},},
});

本地调试

开发调试

在组件库项目中调试

package.json

  "scripts": {"dev": "vite",

index.html

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>组件库本地调试</title></head><body><div id="app"></div><script type="module" src="/src/demo/main.ts"></script></body>
</html>

src/demo/main.ts

其中的 SUI相关代码需修改成自己的组件库

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";// 为了热更新，此处直接从源代码导入，实际使用 SUI 中，请改为 import SUI from "@ecclub/sui";
import SUI from "../index.ts";
const app = createApp(App);
app.use(ElementPlus);
app.use(SUI);app.mount("#app");

src/demo/App.vue

其中的 SUI相关代码需修改成自己的组件库

<template><s-button />
</template>

在这里插入图片描述
运行项目即可

npm link 调试

在组件库项目中运行 npm link
在使用库的项目中运行 npm link 包名
在使用库的项目中使用

src/App.vue 测试手动导入

<script setup lang="ts">
// 测试手动导入
import { sButton } from "@ecclub/sui";
</script><template><s-button />
</template>

src/main.ts 测试完整引入

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import SUI from "@ecclub/sui";createApp(App).use(ElementPlus).use(SUI).mount("#app");

此时 src/App.vue 中的代码仅为

<template><s-button />
</template>

依赖的安装和声明（重点：peerDependencies）

组件库运行必需的依赖用 dependencies，如工具函数库、样式处理库等，一律用 -S （可省略）安装
工具类依赖用 devDependencies，如构建、编译、测试相关的工具，一律用 -D 安装
基础框架依赖通常设为 peerDependencies，如Vue/React，无需安装，仅声明组件库与某个依赖的兼容性范围，而非直接安装这个依赖。例如，你的 Vue 组件库声明 vue: “>=3.2.0” 作为 peer 依赖，是告诉用户：“使用我的库时，你必须自己安装 3.2.0 及以上版本的 Vue”。（开发组件库时本地调试，可以用 --save-dev 安装）

package.json 最终依赖效果范例：

{"peerDependencies": {"vue": ">=3.2.0"  // 框架依赖，由用户项目提供},"dependencies": {"lodash-es": "^4.17.0"  // 组件库运行必需},"devDependencies": {"vite": "^4.0.0",       // 仅开发构建用"typescript": "^5.0.0"  // 仅开发编译用}
}