https://github.com/chameleon-team/cml-ui

chameleon 扩展组件库
https://github.com/chameleon-team/cml-ui

chameleon cml miniprogram mobile mvvm

Last synced: 25 days ago
JSON representation

chameleon 扩展组件库

• Host: GitHub
• URL: https://github.com/chameleon-team/cml-ui
• Owner: chameleon-team
• Created: 2019-01-10T17:47:23.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-12-02T08:50:29.000Z (about 5 years ago)
• Last Synced: 2024-05-19T00:42:07.409Z (7 months ago)
• Topics: chameleon, cml, miniprogram, mobile, mvvm
• Language: Vue
• Homepage: https://CMLJS.org
• Size: 1.25 MB
• Stars: 27
• Watchers: 2
• Forks: 15
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-cml - UI组件实现仓库

README

        
# cml-ui [![version](https://img.shields.io/npm/v/chameleon-tool.svg?style=flat)](https://www.npmjs.com/package/cml-ui)

本仓库为 `cml` 框架的扩展组件库，提供丰富的组件能力

详细见[cml扩展组件文档](https://cmljs.org/doc/component/expand/expand.html)

例如:

```html

{

  "base": {

      "usingComponents": {

        "c-dialog": "cml-ui/components/c-dialog/c-dialog"

      }

  }

}

```

### 1 如何开发

```javascript

npm install

cml dev  //开始开发

```

### 2 目录概述

```javascript

.

├── README.md

├── bin

│   └── build.sh

├── chameleon.config.js

├── dist

│   └── wx

│       ├── app.js

│       ├── app.json

│       ├── app.wxss

│       ├── components

│       ├── pages

│       ├── project.config.json

│       └── static

├── mock

│   ├── api

│   │   └── index.js

│   └── template

│       └── index.php

├── package  // build.sh 结果，发布到npm

│   ├── assets

│   │   ├── css

│   │   └── images

│   ├── components

│   │   ├── c-action-sheet

│   │   └── c-dialog

│   └── package.json

├── package-lock.json

├── package.json

└── src  //开发目录

    ├── app

    │   ├── app.cml

    │   └── app.interface

    ├── assets

    │   ├── css

    │   └── images

    ├── components //开发组件

    │   ├── c-action-sheet

    │   └── c-dialog

    ├── entry

    │   ├── entry.html

    │   ├── entry.web.js

    │   └── entry.weex.js

    ├── pages  //组件示例demo页

    │   ├── API // 相应api 接口demo示例

    │   ├── COMP //相应组件demo示例；

    │   └── index  //主页入口

    │

    ├── router.js

    ├── router.config.json //路由配置

    └── store

        ├── action-types.js

        ├── actions.js

        ├── getter-types.js

        ├── getters.js

        ├── index.js

        ├── mutation-types.js

        ├── mutations.js

        └── state.js

```

开发步骤

1. 查看index.cml文件，大概了解主页的配置和生效路径；

2. 配置：

    只需要在 router.config.json 中配置对应路由页面

3. 配置完毕之后 在 `src/pages/COMP`中书写你的demo组件

4. 当前以上的工作都是为了可以实时查看开发的组件的效果做准备，接下来就需要去`src/components`中去开发我们对应的组件

5. enjoy yourself

### 4 多端预览效果

| web   |      微信小程序      |  native-weex |

|:----------:|:-------------:|:------:|

|  |  |  |