基于VUE.JS的移動端框架Mint UI的使用

來源：懂視網責編：小采時間：2020-11-27 22:28:06

基于VUE.JS的移動端框架Mint UI的使用

基于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 月初開源以來，根據

推薦度：

點擊下載本文 文檔為doc格式

導讀基于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 月初開源以來，根據

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>

則會得到如下頁面：