使用Mint UI 一个基于VUE的移动框架 射流研究…

薄荷用户界面

github.com/ElemeFE/mint

项目主页：mint-ui.github.io/#

演示：elemefe.github.io/mint-

文件：mint-ui.github.io/docs/#

饿了么前端团队推出的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表示支架是基于Vue.js构建的.

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

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

项目建设后的结构如下：

接下来，安装Mint UI:

Npm即时界面-保存-引入薄荷界面

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

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 babel-plugin-component -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中：

模板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。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。