Mint UI基于Vue.js移动组件库

官方网站地址http://mint-ui.github.io/

Mint UI包含丰富的CSS和JS组件，可以满足日常移动开发的需求。通过它，我们可以快速构建风格统一的页面，提高开发效率。

真正意义上的按需加载组件。只能加载声明的组件及其样式文件，无需担心文件过大。

考虑到移动终端的性能门槛，Mint UI采用CSS3处理各种动态效果，避免了浏览器不必要的重绘和重排，从而让用户获得流畅顺滑的体验。

得益于Vue.js高效的组件化方案，Mint UI是轻量级的。即使引入所有文件，压缩文件量也只有100 K。

薄荷用户界面

https://github.com/ElemeFE/mint-ui

项目主页：http://mint-ui.github.io/#!/zh-cn

演示：http://elemefe.github.io/mint-ui/#!/

文件：http://mint-ui.github.io/docs/#!/zh-cn

饿了么前端团队推出的Mint UI是基于Vue.js的移动构件库，自6月初开源以来，根据社区和团队的反馈，已经修复了一些bug，增加了一些新的构件。0.2.0版本于本周发布。本文介绍了如何从头开始使用Mint UI构建一个Vue项目。

脚手架

随着Vue.js的快速发展，为Vue项目搭建脚手架有很多选择。例如，您可以使用官方的vue-cli。本文使用饿了么自己的建筑工具烹饪来完成这个任务。

首先，全球安装烹饪：

npm i烹饪-g

创建新项目文件夹：

mkdir mint-ui-示例

转到项目文件夹，使用烹饪来构建：

烹饪初始化

最后一个参数vue表示脚手架是基于Vue.js搭建的.

在搭建过程中，烹饪需要以下参数：

沙拉，这是一个基于postscript的解决方案，这里选择“什么CSS预处理”。感兴趣的同学可以了解一下。当然，你也可以选择其他的预处理程序。

项目建设后的结构如下：

接下来，安装Mint UI:

npm i薄荷-ui -保存

介绍薄荷用户界面

好了，下面的工作可以分为两种情况：

1.介绍所有组件

如果您的项目将在Mint UI中使用更多的组件，最简单的方法是将它们全部引入。此时，它需要在条目文件main.js中：

从“mint-ui”导入MintUI导入' mint-ui/lib/style . CSS '；vue . use(MinToi)；2.根据需要介绍

如果只需要使用某个组件，只能引入这个组件。Mint UI可以保证在打包代码时，与这个组件无关的文件不会出现在最终的代码中。例如，如果您需要引入一个按钮组件，在main.js中：

从“mint-ui/lib/button”导入Button；导入' mint-ui/lib/button/style . CSS '；Vue.component(Button.name，Button)；可以看出，以上两种导入方式都需要分别导入对应的CSS文件。这非常不方便，尤其是当您使用按需方法引入多个组件时。为了避免这个问题，您可以使用babel-plugin-component插件。首先，当然要安装它：

npm i巴贝尔-插件-组件-D

然后在中进行配置。babelrc:

{'plugins' : ['other-plugin '，['component '，[{'library name' :' mint-ui '，' style ' : true }]}这样就可以把上面两种介绍方法简化为：

从“mint-ui”导入MintUIvue . use(MinToi)；和

从“mint-ui/lib/button”导入Button；Vue.component(Button.name，Button)；插件会自动引入相应的CSS文件。

使用

请阅读文档了解如何使用每个组件。这里只是一个小例子。在app.vue中：

template h1 mint-ui-example/h1mt-button type=' primary ' @ click=' sheet visible=true ' select operation/mt-button mt-action sheet cancel-text=' ' : actions=' actions ' : visible . sync=' sheet visible '/mt-action sheet/template script从' mint-ui '导入{ Toast，MessageBox }；导出默认{name :' app '，data(){ return { sheet visible : false，actions 3360[{ name 3360 ' show toast '，method : this。show toast}，{name:' show messagebox '，method:this。showmsgbox }]}；}，methods : {show Toast () {toast('这是一个吐司')；}，showMsgbox() {MessageBox('提示符'，'这是消息框')；} } };/script将获得以下页面：

预览；拖车

这就是如何使用Mint UI。如果您在使用过程中遇到任何问题，或者想给我们一些建议，欢迎您去GitHub仓库询问问题。

可能有些同学知道，除了这个移动组件库，还有一个桌面组件库vue-desktop当你饿的时候。目前，我们正在重建。这一次，在UED的介入下，整体的视野得到了很大的提升。完成后也将是开源的，会有两个版本，分别支持vue 1.0.x和vue 2.0。当然Mint UI也会考虑支持vue 2.0。

PS: mint-ui手机页面风格异常

问题一，

使用vue2.0 mint-ui的时候，pc端的风格没有问题，但是手机端的风格缩水，失去了想要的效果

这是一个头文件声明问题。只需将此代码添加到条目文件的index.html标签中

元名称=“视口”内容=“宽度=设备宽度，用户可缩放=否，初始比例=1.0，最大比例=1.0，最小比例=1.0”

边肖给大家介绍的Mint UI是基于Vue.js移动组件库的，希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！