卡梅龙Chameleon体验

快速阅读了一下官网的快速上手发现语法和vue超级像所以决定在学vue的同时了解一下同类产品，这是一款一套代码多端同步的框架和vue一样都是mvvn，下载和安装都比较简单，语法和vue基本一致只是多了许多自建内容这是正常操作例如：v-for那么卡梅龙的就是c-for它们都是把自己英文首字母作为标签名前缀使用，这里只做相关简单介绍

运行环境

node >= 8.10.0 npm >= 5.6.0

全局安装chameleon-tool构建工具

1	npm i -g chameleon-tool

不支持第三方包管理器下载,tuchc

创建项目与启动

执行 cml init project
输入项目名称
等待自动执行 npm install 依赖
切换到项目根目录执行cml dev

创建好后会自动跳转到页面

文件结构

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

总体来说这结构和我们之前到vue呢还有node的结构很像很熟悉所以我们会很快适应

创建新页面

在项目根目录下执行cml init page输入页面名称回车即可生产页面到src/pages/first-page/first-page.cml

创建成功提示：[INFO] init page home success!

它是一个单独的文件夹包含文件

创建及引用组件

项目根目录下执行 cml init component，选择Normal component,输入 first-com，回车，即可生成文件components/first-com/first-com.cml。组件也是 cml 文件结构上与页面相同。

拷贝如下代码到first-com.cml

数据绑定演示

<template>
  <view>
    <!-- 数据绑定与计算属性 -->
    <text>{{ message }}</text>
    <text class="class1">{{ message2 }}</text>

    <!-- 条件与循环渲染 -->
    <view c-if="{{showlist}}">
      <view
        c-for="{{array}}"
        c-for-index="idx"
        c-for-item="itemName"
        c-key="city"
      >
        <text> {{idx}}: {{itemName.city}}</text>
      </view>
    </view>

    <!-- 事件绑定 -->
    <view c-bind:tap="changeShow"><text>切换展示</text></view>
  </view>
</template>