设计器接入

设计器为用户提供应用搭建的可视化界面。有两种方式初始化低代码设计器：

1. clone 官方示例代码，按照文档说明直接启动项目。
2. 手工引入设计器的 npm 包，自定义配置、启动、运行。

方法1: 通过示例代码启动设计器

你可以使用 Tango 代码仓库内的 /apps/playground 复制出来，作为基础应用并改造。你需要移除 .umirc.ts 中与 resolvePackageIndex() 方法相关的配置，具体可直接参考我们的示例应用的 .umirc.ts 文件，修改后再手动安装 @music163/tango-designer 即可启动项目。

如果上面的步骤比较繁琐，你也可以直接使用我们提供的 示例应用 代码，只需克隆到本地后安装并启动即可。

提示

本示例应用目前仅提供了设计器的前端基本功能，并且为了在 GitHub Pages 上运行，我们对代码进行了一些调整。后续我们将提供一个包含了低代码设计器前后端的完整项目，可以直接启动。

1. 首先请确认本地已经安装了 Node.js 与 npm/yarn，且 Node.js 的版本大于 16。若本地没有安装 Node.js 或版本不满足需求，推荐使用 nvm 来安装并实现多版本管理。

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
   nvm install 16
   nvm use 16

2. 克隆项目仓库：

   git clone https://github.com/NetEase/tango-playground.git --depth 1

   也可以直接下载 最新代码的压缩包 并解压。

3. 安装项目依赖：

   cd tango-playground
   npm install

4. 在本地的 hosts 文件中将沙箱的同级域名指向本地，以实现沙箱与本地通信。如果你还没有部署过沙箱，可参考 沙箱接入 文档。

   # 假设沙箱已经部署在了 sandbox.example.com 下，hosts 可以将任意 example.com 的子域名指向本地
   127.0.0.1 local.example.com

5. 修改 /src/pages/index.tsx，将 <Sandbox> 的 bundlerURL 替换为已部署的沙箱的地址。

   <Sandbox
       bundlerURL="https://sandbox.example.com"
       onMessage={(e) => {
           // ...
       }}
   />

6. 修改 /package.json，修改 dev 脚本的 HOST 环境变量，将其改为上述配置在 hosts 文件时定义的开发域名。

   "dev": "HOST=local.example.com PORT=8001 umi dev",

7. 使用脚手架的指令启动项目开始开发，启动后需要通过之前 hosts 配置的域名打开本地项目，并信任自签发的证书。

   # 经过上述修改启动后，可通过 https://local.example.com:8001 访问项目
   npm start

8. 如果一切正常，现在你应该可以正常看到设计器的效果了。

   

方法2: 手工引入设计器的 npm 包

WIP

配置低代码设计器

请参考 设计器自定义 部分。