cmp

使用CMP设计制作前端模块

什么东东

想不想减少每天的开发工作量?想不想改变粘贴、复制、修改的开发模式?新的利器来了。CMP试用版本发布了,CMP是一个用于制作网页的工具,你可以用它来制作静态网页,也可以制作网页片段比如一个组件,一个UI,或者一个模块,甚至是一个包含数据请求的模块,它能根据你的需求灵活的实现任何事情。

cmp

试用地址: https://chalecao.github.io/cmp/static/

详细使用手册

目前CMP可以设计制作FTL组件、Regular和NEJ组件,也可以制作静态网页,提供了编程函数通过组件嵌套的方式制作复杂组件。
可以直接加载示例的组件池组件体验一下,如下图:

cmp

cmp

约定

  1. 命名
    组件默认m-xxx-, UI默认u-xxx-, cache默认c-xxx-。其中最外层父元素默认m/u/c-xxx-container, 后面的-container是提取标志,提取前面的m/u/c-xxx部分作为整个组件的name。导出和保存时默认以该名称命名。
  2. 定位采用相对定位+绝对定位的方式布局。目前仅支持container元素相对定位,其他元素都需要相对于container元素的绝对定位。默认创建的container元素将在输出时作为当前编辑所有元素的公共父元素,采用 align 功能时,也是基于该元素对齐到top:0px,left:0px的位置,主要是为了方便依据视觉稿来计算定位。
  3. 模块或者组件UI如果是导出regular,默认导出三个文件,component.js component.html component.css
  4. UI导出FTL则默认导出依据container提取的name.ftl和name.scss
  5. Cache默认导出 component.js component.html component.css 和cache.js ,其中component.js中会自动注入cache请求,可以作为主UI在页面中使用,通过页面的page.js来支配。

规范

  1. 支持组件通过函数来嵌套,但是不建议嵌套台多层次,如果需要,建议拆分成子UI来做。

局限性

  1. 目前还只能制作组件UI,不能制作复杂嵌套的页面。目前仅支持container元素相对定位,其他元素都需要相对于container元素的绝对定位。

简单介绍

CMP
如上图所示,你可以创建一个模块或者UI或者Cache,然后在container中添加图片或者文字等元素,并在右侧控制该元素对应的属性。

详细使用手册

feature

  1. 支持组件、UI、cache的保存和导出,可以把制作好的页面保存成.cmp格式的文件,使用的时候只要导入即可
  2. 支持hover组件,很容易制作出各种hover组件
  3. 支付FTL语法嵌套,可以使用include、IF、FOR语句,配合子组件使用。支持FTL导出,导出为依据container提取的name.ftl和name.scss
  4. 支持Regular 组件导出,导出文件为component.js component.html component.scss

谢谢!

转载请注明出处:http://www.haomou.net/2017/01/10/2017_cmp/
有问题请留言。T_T 皓眸大前端开发学习 T_T