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

Question

如题所述

Answer 1

探索Mint UI：Vue.js移动端组件库的全方位指南</

Mint UI，由饿了么前端团队倾力打造，是一个专为移动设备设计的Vue.js组件库。自开源以来，它凭借其强大的功能和用户友好的设计，赢得了开发者们的热烈反响。最新发布的0.2.0版本，修复了若干bug并增添了新的组件，现在就让我们一起从零开始，搭建一个使用Mint UI的Vue项目吧。

快速上手：脚手架搭建</

随着Vue.js的普及，构建项目的选择日益丰富。本文选择使用饿了么自研的构建工具cooking。首先，通过全局安装cooking来开启旅程：

npm i cooking -g

接着，创建一个新的项目文件夹并初始化项目：

mkdir mint-ui-example && cd mint-ui-example
cooking init vue
这里，参数vue表示基于Vue.js的项目构建。</

在构建过程中，cooking会要求你选择CSS预处理器，如Salad，它基于PostCSS，提供了丰富的解决方案。根据你的需求，选择适合你的选项。

项目结构概览</

完成构建后，你会看到一个清晰的项目结构，为接下来的Mint UI集成做好准备。

集成Mint UI</

为了开始使用Mint UI，首先确保安装它：

npm i mint-ui --save

接下来有两种组件引入方式：

1. 全部引入</

如果你打算大量使用Mint UI组件，最简单的方法是在main.js中一次性引入所有组件：

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);
2. 按需引入</

如果你只对某个组件感兴趣，可以单独引入并注册到Vue实例上：

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

为了解决CSS重复引入问题，可以使用babel-plugin-component插件，简化引入过程。

实战示例：在app.vue中使用Mint UI</

在app.vue中，如是写下Button和ActionSheet的使用示例：

<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';
...
...

这样，你就构建了一个简单而实用的应用页面。

展望与未来</

Mint UI的使用之旅并未结束。饿了么团队正致力于优化桌面端组件库vue-desktop，期待全新的视觉体验。未来，它将支持Vue 1.0.x和Vue 2.0，而Mint UI也将紧随其后，拥抱Vue 2.0的革新。