快速开始

使用研发模式 D2C Plus 功能（后面简称为 D2C⁺）你需要拥有一个企业版的 全功能席位 或者 研发席位 的账号。

启动研发模式

先进入 Pixso 并打开任意一个设计文件，点击右上角的 研发模式 开关即可进入研发模式。

选择 D2C⁺ 并生成代码

在研发模式下，点击右栏 D2C 选项的下拉菜单，选择 D2C⁺。然后选中任意一个设计稿或者元素，即可生成对应的代码。

小提示

如果你不需要将设计稿中的组件实例和代码库绑定，则无需编写任何配置文件。

解析和映射

如果需要自定义解析生成的代码，可以在 DSM（设计系统管理平台） 中进行配置。

打开 DSM

点击顶栏的下拉菜单，打开 DSM 面板。

小提示

DSM 只能在设计模式下打开，且需要有编辑权限才能进行编辑配置。

新建/编辑配置文件

我们目前提供了组件解析器配置项，了解你的需求并根据这些需求创建配置文件，可以帮助你节省时间。

组件解析器：用于将设计稿中的组件实例映射为前端代码的组件标签和属性。

组件解析器 Component parsers

以下配置演示了如何生成一个前端组件的代码（具体配置方式请参考 组件解析器）：

{
  "Button": {
    "name": "el-button",
    "props": { "filter": ["md", "default"] },
    "text": { "nodeName": "_text" },
    "icon": {
      "nodeName": { "name": "icon", "deepFind": true },
      "attrName": "icon"
    }
  }
}

在任意文件中开始使用

现在可以开始在 Pixso 文件中使用 D2C⁺ 功能生成高保真代码了，快去试试看吧！