這篇文章將為大家詳細講解有關Mint UI如何實現(xiàn)基于Vue.js移動端組件庫，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司擁有一支富有激情的企業(yè)網(wǎng)站制作團隊，在互聯(lián)網(wǎng)網(wǎng)站建設行業(yè)深耕十多年，專業(yè)且經(jīng)驗豐富。十多年網(wǎng)站優(yōu)化營銷經(jīng)驗，我們已為成百上千中小企業(yè)提供了做網(wǎng)站、成都網(wǎng)站制作解決方案，按需網(wǎng)站策劃，設計滿意，售后服務無憂。所有客戶皆提供一年免費網(wǎng)站維護!

Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發(fā)需要。通過它，可以快速構建出風格統(tǒng)一的頁面，提升開發(fā)效率。

真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件，無需再糾結文件體積過大。

考慮到移動端的性能門檻，Mint UI 采用 CSS3 處理各種動效，避免瀏覽器進行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗。

依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮后的文件體積也僅有 100+ K。

Mint UI

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

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

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

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

由餓了么前端團隊推出的 Mint UI 是一個基于 Vue.js 的移動端組件庫。自 6 月初開源以來，根據(jù)社區(qū)和團隊內部的反饋，修復了一些 bug 并新增了部分組件，于本周發(fā)布了 0.2.0 版本。本文介紹如何從零開始構建一個使用 Mint UI 的 Vue 項目。

腳手架

隨著 Vue.js 的迅速發(fā)展，目前搭建一個 Vue 項目的腳手架已經(jīng)有不少選擇了。比如可以使用官方提供的 vue-cli。本文使用餓了么自己的構建工具 cooking 來完成這個任務。

首先，全局安裝 cooking：

npm i cooking -g

新建項目文件夾：

mkdir mint-ui-example


進入項目文件夾，使用 cooking 進行構建：

cooking init vue

最后的參數(shù) vue 表示構建的是基于 Vue.js 的腳手架。

在構建過程中，cooking 需要如下一些參數(shù)：

其中“使用何種 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 能夠保證在代碼打包時，與這個組件無關的文件不會出現(xiàn)在最終代碼里。比如需要引入 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>
 <h2>mint-ui-example</h2>
 <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。

PS: mint-ui在手機頁面的樣式不正常問題

 問題一、

在使用 vue2.0 +mint-ui 時pc端的樣式?jīng)]有問題但是手機端的就縮小了，失去了想要的效果

這是一個頭文件的申明問題在入口文件index.html里的標簽里加上這個代碼即可

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

關于“Mint UI如何實現(xiàn)基于Vue.js移動端組件庫”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站標題：MintUI如何實現(xiàn)基于Vue.js移動端組件庫-創(chuàng)新互聯(lián)
標題鏈接：http://www.chinadenli.net/article46/igseg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、用戶體驗、網(wǎng)站排名、服務器托管、電子商務、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)