UI组件库-mint-ui

2018-11-7 小若 组件库

 

Mint UI

 

基于 Vue.js 的移动端组件库

 

特性介绍:

 

1.Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

2.真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。

3.考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。

4.依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

 

Mint UI    https://mint-ui.github.io/#!/zh-cn    饿了么开源的基于vue的移动端UI组件库

Elment    http://element-cn.eleme.io/#/zh-CN    饿了么开源的基于vue的PC端UI组件库


安装

npm install mint-ui -S


按需引入

借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

安装    npm install babel-plugin-component -D

修改.babelrc

"plugins": ["transform-vue-jsx", "transform-runtime", ["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
使用Mint UI


1. 引入要使用的组件        import { Button, Cell } from 'mint-ui'

2. 全局注册组件                Vue.component(Button.name, Button)
                    Vue.component(Cell.name, Cell)

3. 子组件中使用    <mt-button type="danger">碰碰我试试</mt-button>

标签: Mint-ui 组件

« Vuex | Vue-Cli»

发表评论:

Powered by emlog 备案号:豫ICP备18002778号