create-base-teek-theme/dist/template/docs/articles/05.组件/10.开发/01.开发指南.md

``` npm create base-teek-theme@latest my-first-blog ```

---
date: 2025-03-24 23:54:43
title: 基于本库开发新组件
permalink: /pages/a3c3b7
tags:
  - vue组件
author:
  name: 华总
  link: https://xiaoying.org.cn
categories:
  - 组件
  - 开发指南

---





## 开发指南

### 1. 在 `src/components` 目录下创建新组件
### 2. 在 `src/index.ts` 文件中添加组件:

```js
// 导入新组件
import uploadCos from '../Upload/uploadCos.vue';
import uploadLocal from '../Upload/uploadLocal.vue';
import newComponent from '../Your/NewComponent.vue'; // 添加新组件导入

// 组件注册表 - 只需要在这里添加新组件
const componentList = {
    uploadCos,
    uploadLocal,
    newComponent // 添加新组件到注册表
};
```

### 3. 在 `types/index.d.ts` 文件中添加类型声明，需要在**四个地方**添加:

```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>; // 添加默认导出类型
};
```

### 4. 更新版本号并发布:

```bash
# 修改 package.json 中的版本号
pnpm pub
```