MIP開發教程(三) 使用MIP-CLI工具調試組件


站長開發的非通用組件,使用 組件上線平台 提交,上線后代碼位於 GitHub/mip-extension-platform 倉庫中。

## 一 . 在組件倉庫中創建新的組件

在創建組件之前,需要確認 mip-cli 工具已經安裝。在命令行執行:

$ mip -V

如果返回版本號,則安裝成功,可以進行下一步。如果報錯,則需要參考 MIP 開發教程 (一) MIP-CLI 工具安裝與環境部署 安裝 MIP 依賴。

1. 在mip-ext/src目錄中創建組件:
$ mip addelement mip-alert

此時目錄結構如下:

2. 開發組件
  • mip-alert.js用於定義組件,可參考下方示例。
define(function (require) {
        var customElement = require('customElement').create();
        customElement.prototype.firstInviewCallback = function () {
                var element = this.element;
                var text = element.getAttribute('alert-text') || ' 默認 alert 內容 ';
                element.addEventListener('click', function(){
                    alert(text);
                });
        };
        return customElement;
});

二 . 預覽調試組件

1. 在mip-ext/src目錄下啟動mip server來預覽組件,預覽頁面訪問的是README.md文件中的示例。
$ mip server

2. 打開調試網頁http://127.0.0.1:8000/會列出當前倉庫中的組件,點擊進入mip-alert組件預覽。

頁面不能預覽如何解決?

此時可以修改 mip-alert/mip-alert.js,mip-alert/mip-alert.less 實時預覽效果。

三 . 在 MIP 頁中引用自己編寫的 MIP 組件

1. 修改mip.config

進入mip-project/html文件夾下,如果沒有mip.config文件則執行mip init命令創建此文件。如果已經存在,修改mip.config文件的字段extensionsDir../mip-ext/src

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-ext/src 文件夾下,使用如下命令校驗:

$ mip validateelement mip-alert

根據報錯修改對應文件,確認組件通過校驗之后,就可以提交到 MIP GitHub 或 MIP 組件平台了。MIP 組件平台的教程見 MIP 開發教程 (四) MIP 組件平台使用說明


本系列共有四篇文章:

附:常見問題解答

  1. 頁面不能預覽如何解決?
    mip-ext文件夾下的 mip.config文件刪除。

  2. mip-extension-platform 中的組件如何預覽?
    如果代碼已經提交到 mip-extension-platform 中,需要將組件文件夾復制到 mip-ext/src 中,然后使用 mip server 預覽。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM