just4temp20 / mm-ui

mm-ui

A mobile ui lib implement by Vue.

简介

分全局引入和按需引入两种情况。全局引用主要用于开发mm-ui，按需引入主要用于实际生产环境。

全局引入

1、在/example/index.html里屏蔽按需引入的部分 2、在/example/main.js里打开Vue和Cube的部分

import Vue from 'vue'
import Cube from '../src/index'
...
// var Vue = window.Vue
Vue.use(Cube)

3、若要打包，直接执行demo-build

cnpm run demo-build

按需引入

1、在/example/index.html里打开按需引入的部分

<!--Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
<!--mm-ui局部引入-->
<link rel="stylesheet" href="/static/mm-ui/background/background.min.css">
<script src="/static/mm-ui/background/background.min.js"></script>
<script>
  window.Vue.use(window.cube['background'])
</script>

2、在/example/main.js里屏蔽Vue和Cube的部分

// import Vue from 'vue'
// import Cube from '../src/index'
...
var Vue = window.Vue
// Vue.use(Cube)

3、先生成mm-ui的包，生成好后会在根目录下多一个lib包

npm run build

4、把生成好的lib包里面的内容复制到根目录下新建的static/mm-ui下

5、若要打包，执行

npm run demo-build

Install

请用cnpm安装

cnpm i

Development

npm run dev

Build

npm run demo-build

打包后会在根目录下生成一个docs包，在docs/example下执行http-server即可打开页面

注意点

npm run build是用于生成mm-ui的 npm run demo-build是用于生成速推的

坑

1、不要用stylu,dev编译时很慢，严重影响开发效率 2、用new RegExp()为何会时而true时而false的？直接用//gi.test就不会 3、body的font-size设置为0，才不会出现子元素不在父元素内部的问题 4、module里的文件命名是index.js，而不是对应的名字

Recommend use the CLI tools base on vue-cli to init the config and base code:

$ vue init cube-ui/cube-template projectname

Links

• Home

• Docs

• Example

  

• Application Guide

Communication

New cube-ui project ?

Recommend use the CLI tools base on vue-cli to init the config and base code:

$ vue init cube-ui/cube-template projectname

Install

npm install cube-ui --save

Usage

import Vue from 'vue'
import Cube from 'cube-ui'

Vue.use(Cube)

Use modularized cube-ui

import Vue from 'vue'
import {
  /* eslint-disable no-unused-vars */
  Style,
  Button,
  ActionSheet
} from 'cube-ui'

Vue.use(Button)
Vue.use(ActionSheet)

For more information, please refer to Quick Start

ToDo

• More components

• Support theme

Development

git clone [email protected]:didi/cube-ui.git
cd cube-ui
npm install
npm run dev
# or run document development
npm run doc-dev

Changelog

Detailed changes for each release are documented in the release notes.