目录结构

项目结构

使用cml init project 生成的项目结构如下：

├── chameleon.config.js                 // 项目的配置文件
├── dist                                // 打包产出目录
├── mock                                // 模拟数据目录
├── node_modules                        // npm包依赖
├── package.json
└── src                                 // 项目源代码
    ├── app                             // app启动入口
    ├── components                      // 组件文件夹
    ├── pages                           // 页面文件夹
    ├── router.config.json              // 路由配置文件
    └── store                           // 全局状态管理

文件夹和文件

文件	必须	作用
chameleon.config.js	必须	项目配置文件
dist	必须	自动生成，用户无需关注。项目编译目标目录
mock	必须	数据mock编写文件夹
node_modules	必须	自动生成，用户无需关注。npm包安装文件夹
package.json	必须	npm包配置文件
app	必须	应用启动入口根文件夹
components	必须	用户组件根文件夹
pages	必须	页面根文件夹
router.config.json	必须	路由配置文件
store	必须	数据管理文件夹

.cml 文件

一个 .cml 文件开发的组件由四块内容组成，分别是：

标签	必须	属性	作用
template	必须	lang:vue	提供组件结构、事件绑定、数据绑定、样式绑定
template(标签设置cml-type属性时)	必须	cml-type:json	组件配置
script	必须	暂无	组件逻辑
style	必须	lang:less|stylus	组件样式表

.interface 文件

.cml 文件的特殊形式，用于实现多态协议规范，多端差异化的入口

标签	必须	属性	作用	备注
script (interface 定义)	cml-type="interface" 情况下必须和 include 标签二选一	cml-type:interface	定义多态协议	规定组件或者 API 的输入输出结构和类型
script（实现）	多态组件：当无标签时按规定的优先级查找 多态 API：必须有，或来自 include 继承	cml-type:wx|alipay|weex|web|tt|qq|其他 src:API 方法实现文件引用地址|组件实现文件引用地址	实现多态协议	1. 按<script cml-type="interface" >规定的输入输出结构和类型，实现组件或者 API接口的实现。 2. 有 src 属性时，外链其他文件，且仅多态组件必须通过外链实现。
include	必须和 <script cml-type="interface" > 的标签二选一	src:引用 interface 文件路径	继承多态协议	1. 可用于重载既有组件或 API 的实现，定制化某些端个性化能力。 2. 用于扩展新端。