# 组件

## 创建组件

```bash
tvp create 『组件文件夹』
```



### 组件代码树

创建组件之后，可以发现组件的代码树中有3个目录。

| 目录      | 说明                                                         |
| --------- | ------------------------------------------------------------ |
| `src`     | 组件的核心代码                                               |
| `preview` | 组件开发环境中的预览器（用浏览器查看组件的显示效果；修改组件的属性） |
| `editor`  | 组件编辑器；位于组件开发环境中的预览器的右侧区域，可用于修改组件的属性；对应『可视化编辑器』中『属性』部件中的『属性设置』区域，可用于修改组件的属性 |

![image.png](https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/godspenshop/YGZv9U_1583984525058.png)



### 组件的属性支持的类型

```js
/**
 * @param type: 属性类型，支持 JavaScript 原生类型和『组件输入类型』
 * 
 * 『组件输入类型』：
 * input    单行输入框
 * text     多行输入框
 * enum     列表单选    需提供选项字段 defaultList，支持数组和 map 结构
 * image    图片选择
 * audio    音频选择
 * video    视频选择
 * richtext 富文本 
 * number   数字
 * function 方法设置
 * data     JSON 数据
 * date     时间选择
 * checkbox 多选框      同 enum；不提供 defaultList 字段时，输入值为布尔类型
 * radio    单选框      同 enum
 */
```


## 组件开发

```bash
cd 『组件文件夹』
yarn
yarn start
```



### 组件的开发环境

运行 `yarn start` 命令，提示信息中会给出组件开发环境的预览器的网址。

组件开发环境的预览器（`preview`）的左侧会显示组件（的核心 `src`），右侧会显示组件编辑器（`editor`）。

![image.png](https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/godspenshop/QPSfKg_1583462402051.png)



## 图片

您可以去 flaticon.com 为组件找寻合适的免费图片。

比如，![](icon.png)

<div>Icons made by <a href="" title="Payungkead">Payungkead</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>