加速 Vue 项目开发：使用低代码开发组件

低代码具备诸多优点，但我们通常因为大多数低代码工具难以与现有的开发项目优雅地集成。这常常让我们面临必须在两者间做出"非此即彼"的选择。

但想象一下，如果存在一种方式，可以让低代码无缝地融入我们的 Vue 项目，这将极大地加快 Vue 项目的开发速度。

今天就是要给大家推荐一款低代码神器 MyBricks，可以在线使用低代码搭建，然后一键保存到本地的 Vue 项目中作为组件使用。更关键的是还能白嫖，妥妥的生产力工具。

使用教程

0. 安装依赖

推荐使用 npm 命令安装依赖。

npm install @mybricks/renderer-pc -S

如果使用 pnpm 或者 yarn，需要额外手动安装 @mybricks/renderer-pc 中 peerDependencies 的依赖。

yarn add antd@4.21.6 @ant-design/icons@4.7.0 moment @mybricks/comlib-basic @mybricks/comlib-pc-normal -S

pnpm install antd@4.21.6 @ant-design/icons@4.7.0 moment @mybricks/comlib-basic @mybricks/comlib-pc-normal -S

注意： 内置的组件库 antd 需使用 v4 版本。

1. 创建并使用组件

目标： 创建一个(*.vue)组件，并在项目中使用。

操作步骤：

1. 新建「PC云组件」；
2. 点击「出码 > Vue 3」到 components 或其他文件夹下。

完成后我们就能看到在 components 文件夹下生成了一个 MyHelloWorld 组件，然后在页面中引入使用即可。

2. 为组件添加 props

目标： 为组件添加 props，例如 <MyHelloWorld msg="you did it!" />。

操作步骤：

1. 在「交互」面板中「新建编辑项」，并修改编辑项的 ID、标题、类型、描述、默认值等。

如上图，把编辑项的 ID 设置为「msg」就完成了 msg 的 props 声明。

3. 为组件添加事件

目标： 为组件添加事件，例如 <MyHelloWorld @click="myFunc" />。

操作步骤：

1. 在「交互」面板中「添加输出项」，并修改输出项的 ID、标题、类型等。

如上图，把输出项的 ID 设置为「click」就完成了 @click 的事件声明。

以上就是使用低代码开发组件的关键操作流程。

更多

在完成上面的操作后，我们就可以基于 MyBricks 低代码快速搭建出「表单、表格、列表、图表」等各种业务组件了。

附录

• MyBricks 低代码官网：https://www.mybricks.world
• MyBricks 低代码使用文档：https://docs.mybricks.world/docs/getstarted/
• 云组件文档：https://docs.mybricks.world/docs/publish-integration/com-to-local/