准备开发环境

在开始开发前，先安装SuccIDE，然后按如下步骤初始化一个组件开发的项目：

• 创建组件扩展
• 安装succbi-api
• 安装依赖库

创建组件扩展

通过todo命令创建一个组件扩展的目录结构如下：

project
├───package.json
├───capabilities.json
├───tsconfig.json
├───src
│   └───main.ts
│   └───main.less
└───dist

package.json

package.json文件描述了组件扩展的基本信息，包括扩展点名称、作者、开发组件的依赖配置等信息。

capabilities.json

capabilities.json文件描述了组件扩展的属性配置信息。

tsconfig.json

TypeScript配置信息。

main.ts

组件TS代码入口文件。

main.less

组件样式文件。

dist

TypeScript编译为JavaScript后输出的目录。发布扩展时可以选择只发布dist目录下的文件，不发布src目录的文件。

安装succbi-api

组件扩展模板的package.json中已经包含了对succbi-api的依赖，执行npm install命令安装。也可以单独执行npm install succbi-api安装succbi-api的依赖。

安装依赖库

开发一个组件可能需要引入一些第三方库，如d3,vuejs等。可在本地下载需要引入的文件，复制到根目录下，或使用npm命令安装：

npm i d3@^5.0.0 --save

引入文件后的目录结构为：

project
├───package.json
├───main.ts
├───main.less
└───node_modules
│   └───d3

在main.ts中，通过import引入第三方库：

import * as d3 from d3;