Chameleon 目录结构

项目结构

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部