# gmui-taro-component

**Repository Path**: singlekai/gmui-taro-component

## Basic Information

- **Project Name**: gmui-taro-component
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-06
- **Last Updated**: 2026-01-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 组件库添加组件流程 

### 介绍

此流程目的介绍如何将日常项目中常用及便捷的组件添加进入组件库

### 一、复制组件到组件库对应目录并修改文件夹结构

1、放置路径及结构如下图所示：

![目录图][1]

2、修改文件夹结构，规范如下：
src/packages/__VUE
组件名/组件名.taro.vue --->组件文件  
组件名/doc.md          --->组件readme文档  
组件名/index.scss      --->组件样式  
组件名/index.taro.ts   --->组件入口配置

### 二、组件及组件入口配置文件修改

#### 修改组件(组件名/index.taro.ts)

添加导出options配置即可
例：
```
defineOptions({
  name: 'AnimationImg'
})
```

#### 入口配置文件修改

 修改index.taro.ts中对应组件名称及导入路径  
 
 ![入口配置文件][2]

### 三、修改组件库config配置
1、找到路径下config.json文件

![config.json路径][3]

2、添加对象并根据自身组件相关信息进行填写

![此处输入图片的描述][4]

### 四、执行自动化配置命令

根目录下执行：npm run prepare


### 五、验证运行查看组件是否添加成功

根目录下执行：npm run dev:平台简称（平台简称跟taro框架一致jd、tt、h5、weapp等）

运行成功后页面将会展示添加成功的组件，点击即可查看运行效果如下图：

![运行效果][5]

  [1]: https://img.alicdn.com/imgextra/i4/1985004868/O1CN012O7xyL1lpb3CMUUCi_!!1985004868.png
  [2]: https://img.alicdn.com/imgextra/i4/1985004868/O1CN013dQDA31lpb35HT5dI_!!1985004868.png
  [3]: https://img.alicdn.com/imgextra/i3/1985004868/O1CN013OXI9J1lpb3BpX2XX_!!1985004868.png
  [4]: https://img.alicdn.com/imgextra/i3/1985004868/O1CN011MxTkC1lpb3CVKLq9_!!1985004868.png
  [5]: https://img.alicdn.com/imgextra/i1/1985004868/O1CN01Sd57ED1lpb39fKO1j_!!1985004868.gif