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
请用cnpm安装
cnpm i
npm run dev
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
Recommend use the CLI tools base on vue-cli to init the config and base code:
$ vue init cube-ui/cube-template projectname
npm install cube-ui --save
import Vue from 'vue'
import Cube from 'cube-ui'
Vue.use(Cube)
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
-
More components
-
Support theme
git clone [email protected]:didi/cube-ui.git
cd cube-ui
npm install
npm run dev
# or run document development
npm run doc-dev
Detailed changes for each release are documented in the release notes.