【MIP官方博客】MIP开发教程(三) 使用MIP-CLI工具调试组件

  • A+
所属分类:其他杂项
本文信息本文由方法SEO顾问发表于2017-04-2412:09:04,共 1467 字,转载请注明:【MIP官方博客】MIP开发教程(三) 使用MIP-CLI工具调试组件_【方法SEO顾问】

一. 在mip-extensions仓库中创建新的组件

1. 在mip-extensions目录中创建组件:

$ mip addelement mip-alert

此时在mip-extensions文件夹中创建了mip-alert组件:

2. 开发组件

/**
 * @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,等待项目组审核。

本系列共有四篇文章:

附:常见问题解答

  1. 页面不能预览如何解决?

    将mip-extensions文件夹下的mip.config文件删除。

  • 版权声明:除非注明,本博客均为北京SEO方法的原创文章,转载或引用请以超链接形式标明本文地址,否则会在SEO圈内公开此种不尊重版权的行为,谢谢合作!本文地址:https://seofangfa.com/other-note/mip-jiaocheng3.html
  • 转载请注明:【MIP官方博客】MIP开发教程(三) 使用MIP-CLI工具调试组件_ 【方法SEO顾问】

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: