公民道德建设的核心,交换夫妻,社会主义初级阶段的主要矛盾
官网地址
mint ui 包含丰富的 css 和 js 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
考虑到移动端的性能门槛，mint ui 采用 css3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
依托 vue.js 高效的组件化方案，mint ui 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 100+ k。
mint ui
github：https://github.com/elemefe/mint-ui
项目主页：
demo：
文档：
由饿了么前端团队推出的 mint ui 是一个基于 vue.js 的移动端组件库。自 6 月初开源以来，根据社区和团队内部的反馈，修复了一些 bug 并新增了部分组件，于本周发布了 0.2.0 版本。本文介绍如何从零开始构建一个使用 mint ui 的 vue 项目。
脚手架
随着 vue.js 的迅速发展，目前搭建一个 vue 项目的脚手架已经有不少选择了。比如可以使用官方提供的 vue-cli。本文使用饿了么自己的构建工具 cooking 来完成这个任务。
首先，全局安装 cooking：
npm i cooking -g
新建项目文件夹：
mkdir mint-ui-example
进入项目文件夹，使用 cooking 进行构建：
cooking init vue
最后的参数 vue 表示构建的是基于 vue.js 的脚手架。
在构建过程中，cooking 需要如下一些参数：
其中“使用何种 css 预处理”这里选择的是 salad，它是一套基于 postcss 的解决方案，有兴趣的同学可以了解一下。当然，你也可以选择其他的预处理器。
完成构建后的项目结构为：
接下来安装 mint ui：
npm i mint-ui --save
引入 mint ui
好了，之后的工作可以分为两种情况：
1. 引入全部组件
如果你的项目会用到 mint ui 里较多的组件，最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中：
import mintui from 'mint-ui'; import 'mint-ui/lib/style.css'; vue.use(mintui);
2. 按需引入
如果你只需要使用某个组件，可以仅引入这个组件，mint ui 能够保证在代码打包时，与这个组件无关的文件不会出现在最终代码里。比如需要引入 button 组件，则在 main.js 中：
import button from 'mint-ui/lib/button'; import 'mint-ui/lib/button/style.css'; vue.component(button.name, button);
可以看出，上面两种引入方法都要单独引入相应的 css 文件。这很不方便，尤其当你使用按需引入的方法引入多个组件时。为了避免这个问题，可以使用 babel-plugin-component 插件。首先当然是安装它：
npm i babel-plugin-component -d
然后在 .babelrc 中配置它：
我要评论
{
"plugins": ["other-plugin", ["component", [
{ "libraryname": "mint-ui", "style": true }
]]]
}
这样上述两种引入方法就可以简化为：
import mintui from 'mint-ui'; vue.use(mintui);
和
import button from 'mint-ui/lib/button'; vue.component(button.name, button);
插件会自动引入相应的 css 文件。
使用
每个组件的使用方法请阅读文档，这里只举一个微小的例子。在 app.vue 中：
<template>
<h1>mint-ui-example</h1>
<mt-button
type="primary"
@click="sheetvisible = true">
选择操作
</mt-button>
<mt-actionsheet
cancel-text=""
:actions="actions"
:visible.sync="sheetvisible">
</mt-actionsheet>
</template>
<script>
import { toast, messagebox } from 'mint-ui';
export default {
name: 'app',
data() {
return {
sheetvisible: false,
actions: [{
name: '展示 toast',
method: this.showtoast
}, {
name: '展示 message box',
method: this.showmsgbox
}]
};
},
methods: {
showtoast() {
toast('这是一个 toast');
},
showmsgbox() {
messagebox('提示', '这是一个 message box');
}
}
};
</script>
则会得到如下页面：
预告
以上就是 mint ui 的使用方法介绍。如果在使用的过程中遇到任何问题，或者是想给我们一些建议，欢迎大家去 github 仓库提 issue。
可能有些同学知道，除了这个移动端组件库以外，饿了么还有一套桌面端组件库 vue-desktop。目前我们正在对它进行重构，这次有了 ued 的介入，整体视觉有了很大的提升。完成后也会开源，而且会有两个版本，分别支持 vue 1.0.x 和 vue 2.0。当然，mint ui 也会考虑支持 vue 2.0。
ps: mint-ui在手机页面的样式不正常问题
问题一、
在使用 vue2.0 +mint-ui 时pc端的样式没有问题但是手机端的就缩小了，失去了想要的效果
这是一个头文件的申明问题在入口文件里的标签里加上这个代码即可
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
总结
以上所述是小编给大家介绍的mint ui 基于 vue.js 移动端组件库，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论