本页导航
article
基于本库开发新组件
AI摘要
本文介绍了基于现有组件库开发新组件的详细指南。首先需要在指定目录创建新组件,然后在入口文件中导入并注册该组件。接着,在类型声明文件中四个关键位置添加新组件的类型定义,确保类型安全。最后,更新版本号并发布新版本,实现组件的正式上线。该流程确保新组件能够被正确识别和使用。
开发指南
一、在 src/components
目录下创建新组件
二、在 src/index.ts
文件中添加组件
// 导入新组件
import uploadCos from '../Upload/uploadCos.vue';
import uploadLocal from '../Upload/uploadLocal.vue';
import newComponent from '../Your/NewComponent.vue'; // 添加新组件导入
// 组件注册表 - 只需要在这里添加新组件
const componentList = {
uploadCos,
uploadLocal,
newComponent // 添加新组件到注册表
};
三、 在 types/index.d.ts
文件中添加类型声明,需要在四个地方添加
// 1. 导入时的组件类型定义
declare module 'liyao-vue-common' {
export const uploadCos: DefineComponent<{}, {}, any>;
export const uploadLocal: DefineComponent<{}, {}, any>;
export const newComponent: DefineComponent<{}, {}, any>; // 添加新组件类型
export const install: (app: App) => void;
}
// 2. Vue 全局组件类型定义
declare module 'vue' {
export interface GlobalComponents {
uploadCos: DefineComponent<{}, {}, any>;
uploadLocal: DefineComponent<{}, {}, any>;
newComponent: DefineComponent<{}, {}, any>; // 添加全局组件类型
}
}
// 3. 组件文件模块声明
declare module '@/components/Upload/uploadCos.vue' {
const component: DefineComponent<{}, {}, any>;
export default component;
}
declare module '@/components/Upload/uploadLocal.vue' {
const component: DefineComponent<{}, {}, any>;
export default component;
}
// 添加新组件的模块声明
declare module '@/components/Your/NewComponent.vue' {
const component: DefineComponent<{}, {}, any>;
export default component;
}
// 4. 默认导出
declare const _default: {
install: (app: App) => void;
uploadCos: DefineComponent<{}, {}, any>;
uploadLocal: DefineComponent<{}, {}, any>;
newComponent: DefineComponent<{}, {}, any>; // 添加默认导出类型
};
四、 更新版本号并发布:
# 修改 package.json 中的版本号
pnpm pub
最后更新于 2025-09-30 20:31