开端#

低代码开发、可视化、可拖拽的那种平台还是有不少的。但是可以进行本地开发，然后发布内容的不多。简单来说，就是有一部分内容是线上可视化开发的，不影响项目本身的开发。起初是看到mitosis能生成多端组件代码，才看到builder的，顺带还看了看qwik。有兴趣都可以看看。这篇文章的目的不是要去用这个平台做开发，而是了解线上线下低代码开发的思想。

• 官网：builder.io
• mitosis：mitosis.builder.io
• qwik：qwik.builder.io
  • qwik[中文]：qwikcn.netlify.app

builder的普通用户使用和其他低代码平台大同小异，这里主要说开发者模式。

开发者模式#

builder的开发者模式很特别，在官网注册账号之后验证一下邮箱。接下来创建一个空间，这个空间可以邀请团队人员协作开发。接下来是重头戏。

创建内容模型（models）#

官方原话是：内容模型允许您为数据和 UI 组件创建自定义类型，例如自定义部分或结构化数据到您的站点，用于公告栏、博客文章、导航链接等等。

创建的表单出来之后需要填一下内容

• 标题和描述随便填写（例如：test）

• 预览地址(Preview URL)：这个地方填写本地项目的开发运行地址（这里用的qwik，地址是：http://localhost:5173，其他项目会有所不同需根据实际情况填写）

• 复制组件代码，目前builder支持的语言如下（请根据项目实际情况选择）：

  • Next
  • Qwik
  • React
  • Svelte
  • Gatsby
  • Vue
  • Nuxt
  • React Native
  • Angular
  • Shopify
  • Android
  • Swift
  • REST API
  • GraphQL
  • JS
  • Webcomponents

• 本地项目安装builder.io解析器 ，不同语言有不同的sdk，使用npm，yarn，pnpm都可以。这里列几个常用的库

  • @builder.io/sdk-qwik
  • @builder.io/sdk-vue
  • @builder.io/react

创建内容（content）#

1. 创建的表单填一下名字（Name）和路径地址（url）。这里本地页面使用首页index的话，默认的“/”就行，不是就写出对应页面的访问路径。然后保存。（注意这里的url地址和项目访问的url地址相同，要优先保证项目中的url能正常访问）
2. 打开本地index.tsx文件，将之前复制的组件代码全部粘贴进去。
3. 运行本地项目直到能正常访问本地页面。
4. 在builder.io上点击刚才创建好的content，进入可视化编辑页面。（遇到弹窗说错误的，点击网站前面的🔒在下拉菜单中选择“网站设置”->“不安全内容”改为“允许”之后刷新页面即可）
5. 如果一切正常，页面中将会出现可视化内容操作区 block，否则请检查3、4步。接下来就开始可视化低代码操作页面内容。
6. 内容编辑完成后，点击右上角的发布（publish）按钮，成功后，访问本地（localhost）的页面可以看到保存的线上内容显示在页面上，至此整个开发者初体验就完成了。

结语#

builder.io免费版本含有诸多限制，但是这对低代码使用上提供了新思路。

• 低代码开发的内容由低代码平台维护
• 开发人员只需要在项目中使用解析器性质的组件显示结果