Builder DevTools是一个包装，可帮助您简化Builder的视觉无头CMS启动Qwik项目的开始。
ðânext.js支持在工作中！
我们很高兴介绍并仔细观察Builder.io的DevTools。这就是改善开发人员的体验。
当前，有一些先决条件和步骤可以使Qwik与Builder集成，但我们希望使其更容易。
安装和初始设置
要开始一个新的Qwik项目，请运行以下命令：
npm create qwik@latest
注意：您可以使用
pnpm或yarn。
选择带有Visual CMS选项的站点：
这初始化了一个新的QWIK应用程序，并为您的应用程序准备好用于Builder的Visual CMS初始化。
- 转到您的项目文件夹并运行：
pnpm install - 运行：
pnpm run dev - 单击终端中出现的链接
这将打开您新创建的应用程序，并启动与构建器的连接流：
这将带您通过Builder的帐户创建过程（如果您没有注册），并以授权您的申请结束。
这实际上在您的项目文件系统中创建了一个.ENV文件，并从构建器中带来了API密钥：
庆祝活动后，您准备使用Builder的Drag＆Drov UI在您的应用中！
那有多酷？！
注册组件
我们视觉CMS的关键功能之一是使用您在代码库中编写的代码和组件的选项，然后在构建器中使用它们。我们称此为“注册组件”。
过去，这要求开发人员使用SDK注册其组件并填写正确的属性。
现在，随着我们的新DevTools，我们使这个过程更加容易。
您会注意到右下角的一个小图标 - 这是我们的DevTools抽屉。
单击它打开一个抽屉，该抽屉显示您的所有组件，包括注册和未注册。
用户界面和功能
DevTools的UI是为了开发人员的便利而设计的，它提供了所有组件的全面视图以及直接与它们互动的能力。这包括重命名，注册和编辑组件的输入：
开发服务器的优势
DevTools利用Dev服务器，提供对文件系统的读取访问访问权限以及将内容更新发布到Builder.io帐户的能力。这有助于开发人员迅速生成新内容。无论您是创建博客，产品页面还是任何其他类型的内容，该工具都可以通过单击按钮来完成它：
与其他框架的潜在集成
我们不停在这里。正如我们提到的那样，我们正在努力使DevTools与其他JavaScript框架兼容，例如Next.js，Sveltekit和Remix。
结论
Builder.io的Devtools是由DX的痴迷和不断的迭代创建的。我们希望提供一种为创建组件和构建Web应用程序的平滑体验，同时收紧了整个产品团队之间的协作。
如果您是一名开发人员，希望清除由基本UI更改组成的营销积压门票，那么值得为建筑商提供试驾。
请继续关注更多见解和更新。愉快的编码！
需要帮忙？
如果您使用此工具遇到任何麻烦，请join our Discord server。
通过您的组件在视觉上构建
Builder.io是一个无头的CMS，可让您在现有网站内使用your components的drag and drop。
// Dynamically render your components
export function MyPage({ json }) {
return <BuilderComponent content={json} />
}
registerComponents([MyHero, MyProducts])