1. 初始化 MIP 配置
首先在html
目錄下進行初始化 MIP 配置:
$ mip init
此時會創建mip.config
文件:
2. 新建一個 MIP 網頁
在mip-project/html
文件夾下輸入如下命令:
$ mip add index.html
成功添加后,本地文件夾中會出現 index.html 文件,這就是一個基礎的 MIP 頁面
在新建網頁的時候可以添加需要載入的 MIP 組件 JavaScript 腳本,例如:
$ mip add index.html mip-share
將在index.html
中載入mip-share
組件的 JavaScript 腳本
3. 編寫 MIP 網頁代碼
MIP 頁面新手指南可參見 官網文檔-新手指南。在編寫 MIP 代碼的時候需要注意符合 MIP 網頁規范,否則通不過 MIP 校驗程序,MIP 校驗規則地址:https://www.mipengine.org/doc/2-tech/2-validate-mip.html。
4. 校驗 MIP 網頁
$ mip validate index.html
出現ERROR
的條目通不過 MIP 校驗,需要進行修改。
例如:
** 注意 **:
MIP 頁面應該為utf-8
編碼,其他編碼格式通不過校驗,如果需要使用其他編碼格式,可以使用線上校驗器粘貼代碼進行校驗,
線上校驗器地址: https://www.mipengine.org/validator/validate。
5. 調試 MIP 網頁
進入到 html 項目目錄,啟動mip server
$ mip server
訪問http://127.0.01:8000
進入調試頁面:
** 注意 **:
mip server
默認監聽8000
和35730
端口,如果有端口沖突可以在mip.config
中修改啟動端口。
也可以使用mip server -f
命令強制關閉當前占用端口的 node 進程 (windows 下無效)。
本系列共有四篇文章:
- MIP 開發教程 (一) MIP-CLI 工具安裝與環境部署
- MIP 開發教程 (二) 使用 MIP-CLI 工具調試 MIP 網頁
- MIP 開發教程 (三) 使用 MIP-CLI 工具調試組件
- MIP 開發教程 (四) MIP 組件平台使用說明