基于VUE.JS的移动端框架Mint UI

Mint UI

GitHub：github.com/ElemeFE/mint

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

Demo：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。本文使用饿了么本身的构建工具 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。