Git Product home page Git Product logo

cml-ui's Introduction

cml-ui

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

详细见cml扩展组件文档

例如:

<script cml-type="json">
{
  "base": {
      "usingComponents": {
        "c-dialog": "cml-ui/components/c-dialog/c-dialog"
      }
  }
}
</script>

1 如何开发

npm install
cml dev  //开始开发

2 目录概述

.
├── 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

cml-ui's People

Contributors

jimwmg avatar startheart avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.