一. 在mip-extensions仓库中创建新的组件
1. 在mip-extensions目录中创建组件：
$ mip addelement mip-alert 
此时在mip-extensions文件夹中创建了mip-alert组件：
2. 开发组件
mip-alert.js用于定义组件，可参考下方示例。
mip-alert.less用于定义组件样式，可参考 。
README.md用于说明组件用法，可参考 。
package.json用于记录组件版本及开发者信息，可参考 。
/**
* @file mip-alert 组件
* @author Grace
*/
define(function(require) {
var customElement = require('customElement').create();
customElement.prototype.build = function() {
var element = this.element;
var text = element.getAttribute('alert-text') || '默认alert内容';
element.onclick = function() {
alert(text);
};
};
return customElement;
});二. 预览调试组件
1. 在mip-extensions目录下启动mip server来预览组件，预览页面访问的是README.md文件中的示例。
$ mip server
2. 打开调试网页http://127.0.0.1:8000/会列出当前仓库中的组件，点击进入mip-alert组件预览。
访问http://127.0.01:8000进入调试页面。
进入mip-alert组件中
三. 在MIP页中引用自己编写的MIP组件
1. 修改mip.config
进入mip-project/html文件夹下，如果没有mip.config文件则执行mip init命令创建此文件。如果已经存在，修改mip.config文件的字段extensionsDir为../mip-extensions。
2. 在html目录下创建mip-alert.html文件，并添加mip-alert组件
mip add mip-alert.html mip-alert 在body中引入
<mip-alert alert-text="我是alert的内容">点击触发alert</mip-alert>3. 在html目录下启动mip server
访问http://127.0.01:8000进入调试页面。进入mip-alert.html页面
四. 组件提交到github仓库时需要进行校验
使用如下命令校验：
$ mip validateelement mip-demo
组件通过校验之后，提交到仓库，通过github提交 pull request，等待项目组审核。
本系列共有四篇文章：
- MIP开发教程(三) 使用MIP-CLI工具调试组件
附：常见问题解答
-
页面不能预览如何解决？
将
mip-extensions文件夹下的mip.config文件删除。
评论