服务 #

通常在开发扩展插件 extension 时，我们会需要在本地打开某个指定的表单 form，同时在这个表单中使用正在开发的扩展插件，这样就可以无需每次要将构建的内容 dist 复制到运行 browser 服务器上才能看到真实效果。

准备 #

在开始前，需要确认你已经得到了一份可以登录运行平台的账号。

这里假设你的账号为：

{
  "username": "root",
  "password": "123456"
}

{
  "username": "root",
  "password": "123456"
}

在这之后，我们打开项目 co-extension 根目录环境变量配置文件 .env，并配置账号信息：

# .env
VITE_USERNAME=root     # username
VITE_PASSWORD=123456   # password

# .env
VITE_USERNAME=root     # username
VITE_PASSWORD=123456   # password

同时，我们还要再 index.html 中配置运行平台的服务地址，假设为 http://127.0.0.1:5106：

<!-- index.html -->
<script>
  var CONFIG = {
    API: {
      BASE_URL: 'http://127.0.0.1:5106', // service url
    },
  }
</script>

<!-- index.html -->
<script>
  var CONFIG = {
    API: {
      BASE_URL: 'http://127.0.0.1:5106', // service url
    },
  }
</script>

现在你已经完成了所有事前准备，下一步就来启动本地服务吧！

启动服务 #

在项目根目录运行 serve 脚本启动：

pnpm run serve

pnpm run serve

通过 vite 我们启动了一个本地服务，并且使用的为 src 目录下的 vue3 工程。

项目启动默认地址为 http://127.0.0.1:5173，在浏览器（推荐使用最新版 chrome）打开该地址，此时我们已经可以看到启动主页 Co Extension Playground 了。

打开表单 #

当然，我们不会规定用户必须在特定表单中才能开发，所以我们需要配置 playground 打开你需要的表单。

这一步，我们打开 /src/components/set-form/index.vue 组件，在其中我们使用了 CoRenderCtor 渲染器，它能够将指定表单等渲染到指定位置。

在 onMounted 钩子中编写：

// 在 onMounted 生命周期后执行，确保能获取 root 节点
onMounted(() => {
  if (root.value) {
    window.CoRenderCtor.of().init(root.value).setForm({
      name: 'extension-playground', // 表单名称
      busi: 0, // 业务编号
    })
  }
})

// 在 onMounted 生命周期后执行，确保能获取 root 节点
onMounted(() => {
  if (root.value) {
    window.CoRenderCtor.of().init(root.value).setForm({
      name: 'extension-playground', // 表单名称
      busi: 0, // 业务编号
    })
  }
})

再切回浏览器，可以看到表单 extension-playground 已经打开。

在本章节中，我们成功在本地打开了表单并加载了扩展插件，但是现在的扩展插件并不支持热加载（HMR），即每次修改了扩展插件必须重新运行 build:extensions 才能看到更新后的效果，这十分的繁琐，下一章节我们将说明一种 dev 脚本来解决这个问题。