---
order: 2
navTitle: 准备开发环境
---
# 准备开发环境

在开始开发前，先准备 SuccApp for VS Code 或 SuccApp CLI，参见[扩展开发](../../../ai-building/extension/extension.md)，然后按如下步骤初始化一个组件开发的项目：

- [创建组件扩展](#创建组件扩展)
- [安装 succbi-api](#安装succbi-api)
- [安装依赖库](#安装依赖库)

## 创建组件扩展

在 SuccApp for VS Code 中执行 **SuccApp: 从模板新建扩展**，选择组件扩展点和合适的模板；也可以使用 SuccApp CLI 创建：

```bash
succapp workspace extension create <extension-point> <template> <name>
```

创建完成后的组件扩展目录结构如下：

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

### package.json

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

### capabilities.json

[capabilities.json](./capabilities-json.md)文件描述了组件扩展的属性配置信息。

### 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命令安装：

```shell
npm i d3@^5.0.0 --save
```

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

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

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

```typescript
import * as d3 from d3;
```