MIP开发教程(三) 使用MIP-CLI工具调试组件

  • 一 . 在 mip-extensions 仓库中创建新的组件
  • 二 . 预览调试组件
  • 三 . 在 MIP 页中引用自己编写的 MIP 组件
  • 四 . 组件提交到 GitHub 仓库时需要进行校验

站长开发的非通用组件,使用 组件上线平台 提交,上线后代码位于 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;
});
  • mip-alert.less用于定义组件样式,可参考 mip-fixed/mip-fixed.less。
  • README.md用于说明组件用法,可参考 mip-fixed/README.md。
  • package.json用于记录组件版本及开发者信息,可参考 mip-fixed/package.json。

二 . 预览调试组件

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 组件平台使用说明



本系列共有四篇文章:

  • MIP 开发教程 (一) MIP-CLI 工具安装与环境部署
  • MIP 开发教程 (二) 使用 MIP-CLI 工具调试 MIP 网页
  • MIP 开发教程 (三) 使用 MIP-CLI 工具调试组件
  • MIP 开发教程 (四) MIP 组件平台使用说明

附:常见问题解答

  1. 页面不能预览如何解决?
    mip-ext文件夹下的 mip.config文件删除。

  2. mip-extension-platform 中的组件如何预览?
    如果代码已经提交到 mip-extension-platform 中,需要将组件文件夹复制到 mip-ext/src 中,然后使用 mip server 预览。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/535922.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MIP开发教程(二) 使用MIP-CLI工具调试MIP网页

初始化 MIP 配置 新建一个 MIP 网页 编写 MIP 网页代码 校验 MIP 网页 调试 MIP 网页 1. 初始化 MIP 配置 首先在html目录下进行初始化 MIP 配置&#xff1a; $ mip init 此时会创建mip.config文件&#xff1a; 2. 新建一个 MIP 网页 在mip-project/html文件夹下输入如下…

Nginx(五):动静分离

1、概念基础 Nginx动静分离简单来说就是把动态请求和静态请求分开&#xff0c;不能理解成只是单纯的把动态页面静态页面的物理分离。严格意义上说应该是动态请求跟静态请求的分开&#xff0c;可以理解成使用Nginx处理静态页面&#xff0c;Tomcat处理动态页面。动静分离从目前实…

Nginx(六):配置nginx高可用集群

我们知道在我们使用nginx代理多态tomcat服务器时&#xff0c;如果某台tomcat服务器发生宕机&#xff0c;那么nginx的分配机制可以自动将其剔除。但是如果发生了nginx的宕机状况&#xff0c;又该如何解决呢。 1、配置高可用的集群 1.1、什么是高可用 高可用HA&#xff08;Hig…

MIP开发教程(一) MIP-CLI工具安装与环境部署

依赖安装 安装 MIP-CLI 创建开发文件结构 1. 依赖安装 MIP-CLI 使用 NPM 安装&#xff0c;依赖 node 环境&#xff1a; node 安装-windowsnode 安装-mac MIP-CLI 开发组件需要 git&#xff1a; git 安装-windowsgit 安装-mac 2. 安装 MIP-CLI MIP-CLI&#xff1a;mip 开…

向MIP开源项目提交Issues

Issues 是 GitHub 管理需求&#xff0c;讨论技术方案的方式&#xff0c;附&#xff1a;官方解释。MIP 是在 GitHub 上的开源项目&#xff0c;也使用 Issues 来做任务管理。 一、Issues 在 MIP 项目中的应用 MIP 项目中的 Issues 主要有两种用法&#xff1a; 1. * 记录 bug,…

Nginx(七):nginx原理解析

前面我们讲到了nginx的反向代理、负载均衡、动静分离以及高可用&#xff0c;本篇我们来了解一下nginx的原理&#xff0c;看一下nginx是怎么执行的。 1、mater和worker 2、worker是如何进行工作的 3、相关问题 3.1、一个 master 和多个 woker 有好处 &#xff08;1&#xff0…

MIP技术交流分享(3月9日)

3月9日上周四下午&#xff0c;MIP 团队工程师与去哪儿酒店云、众荟的 Web 前端工程师进行了一次面对面的技术交流。 在这次交流中&#xff0c;MIP 工程师主要分享了 MIP 技术原理&#xff0c;MIP 加速原理&#xff0c;以及 MIP 为开发者提供的工具集。去哪儿的工程师也提出了通…

SpringBoot基础篇(一):Spring Boot入门

我们今天开始对SpringBoot的学习&#xff0c;本篇主要是Spring Boot的入门部分。 1、SpringBoot简介 引用SpringBoot在百度百科中的含义&#xff1a; Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使…

SpringBoot番外篇(一):使用Spring Initializer快速创建Spring Boot项目(IDEA版)

IDE都支持使用Spring的项目创建向导快速创建一个Spring Boot项目&#xff1b; 选择我们需要的模块&#xff1b;向导会联网创建Spring Boot项目&#xff1b; ps:需要联网 1、创建新项目时选择Spring Initializ&#xff0c;选择好java版本&#xff0c;点击next。r 2、填写项…

开发教程(四) MIP组件平台使用说明

组件审核平台用于上传 MIP 组件。经过自动校验之后&#xff0c;提交审核&#xff0c;通过审核的组件会定时推送到线上&#xff0c;供网站使用。 平台地址&#xff1a;https://www.mipengine.org/platform/ 1. 使用说明 MIP 组件审核平台用于提交开发完成的组件&#xff0c;如…

MIP 技术交流分享(3月15日)

3月15日下午&#xff0c;MIP 团队工程师与58赶集的 Web 前端工程师进行了一次面对面的技术交流。 在这次交流中&#xff0c;MIP 工程师主要分享了 MIP 技术原理&#xff0c;MIP 加速原理&#xff0c;以及 MIP 为开发者提供的工具集。 58赶集的工程师提出了以下问题&#xff1a…

Redis(零):背景

什么是NoSQL&#xff0c;什么是Redis&#xff0c;我们在了解这个系列之前&#xff0c;先来看一下Redis是从何而来&#xff1f;Why redis is needed? 1、单机MySQL年代 在最早的单机MySQL年代&#xff0c;存在着访问量小&#xff0c;单个数据库等特点。 但是特有着众多的缺…

Redis(二):Redis入门与性能测试

1、Redis概述 Redis是什么&#xff1a; Redis&#xff08;Remote Dictionary Server )&#xff0c;即远程字典服务&#xff0c;是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 免费开源&#xf…

Redis(三):Redis基础知识与常用命令

1、基础命令 Redis默认有16个数据库&#xff0c;用的是第0个数据库&#xff0c;可以使用select进行切换数据库&#xff0c;使用DBSIZE查看DB大小&#xff08;只针对当前数据库&#xff09;。 使用keys * 查看当前数据库下所有的key&#xff0c;使用flushdb清除当前数据库&am…

五个案例简述Web设计原则:通用一致

作者 | 百度搜索用户体验中心 《Web设计指南》分为设计原则、基础规范两方面主要内容&#xff0c;同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者&#xff0c;订阅《Web设计指南》。 前言 《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南&a…

WebP 在减少图片体积和流量上的效果如何?WebP 技术实践分享

作者 | Jackson 编辑 | 尾尾 不论是 PC 还是移动端&#xff0c;图片一直占据着页面流量的大头&#xff0c;在图片的大小和质量之间如何权衡&#xff0c;成为了长期困扰开发者们的问题。而 WebP技术的出现&#xff0c;为解决该问题提供了好的方案。本文将为大家详细介绍 WebP 技…

百度主任架构师谭待:如何让不带团队的程序员负责重大项目?

演讲 | 谭待 整理 | 赵新龙、尾尾 谭待&#xff0c;百度主任架构师、百度搜索公司技术委员会联席主席。主要研究领域在分布式系统和搜索引擎&#xff0c;是百度BVC代理计算和Matrix私有云的主要设计者&#xff0c;两获百度最高奖。主持设计了百度新一代搜索架构&#xff0c;在…

Chrome Dev Summit 2017参会笔记

作者 | 高磊 编辑 | 尾尾 为期两天的 Chrome Dev Summit 2017 于 10月23日~24日在美国旧金山举办。由于我们近期和Google的合作较多&#xff0c;对Google的动作也比较关注&#xff0c;所以受邀参加了这次的Chrome Dev Summit &#xff08;CDS&#xff09;。本文是我在现场做的…

九个案例简述Web设计原则:简洁清晰

作者 | 百度搜索用户体验中心 《Web设计指南》分为设计原则、基础规范两方面主要内容&#xff0c;同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者&#xff0c;订阅《Web设计指南》。 前言 《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南&a…

大型网站HTTPS 实践(一)| HTTPS 协议和原理

作者 | 百度HTTPS技术支持团队 百度已经上线了全站 HTTPS 的安全搜索&#xff0c;默认会将 HTTP 请求跳转成 HTTPS。本文就着重介绍了 HTTPS 协议涉及到的重要知识点和平时不太容易理解的盲区&#xff0c;希望能对大家理解 HTTPS 协议有帮助。百度 HTTPS 性能优化涉及到大量内容…