目录结构(Directory structure)

项目结构

使用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:cml|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. 用于扩展新端。

results matching ""

    No results matching ""