3. 开发组件

在我们的 站点目录下，运行 mip2 add 命令，新增一个组件模板。假设我们要编写的组件名为 imagehider，我们可以命名为 mip-example-imagehider，中间加上站点名称来标识和区分。

可以在 目录下看到，新增组件结构如下：

这里的 mip-example-imagehider.vue 就是我们组件的源码文件。

功能实现

mip.png 如下所示：

编辑 mip-example-iamgehider.vue 文件，书写的语法 Vue 组件基本是一样的。如果对 Vue 不熟悉，可以先阅读 进行了解。我们引入上述图片，并编码实现点击隐藏的简单功能，代码如下：

在项目的组件 目录中可以编辑 mip-example-imagehider.html 文件

这样我们就完成了组件测试页面的开发，关于组件开发的更多信息，可以参考组件开发章节，关于 MIP 组件机制详细的内容，可以参考 。

接下来就需要验证我们的组件是不是能够正常工作了，下一节我们将介绍如何预览调试组件。