Vue.js行動端元件庫使用方法

這次帶給大家Vue.js行動裝置元件庫使用方法，Vue.js行動裝置元件庫使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

Mint UI 包含豐富的 css 和 JS 元件，能夠滿足日常的行動端開發需求。透過它，可以快速建立風格統一的頁面，提升開發效率。

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

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

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

Mint UI

由餓了麼前端團隊推出的 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 的腳手架。

其中「使用何種 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。

PS: mint-ui在手机页面的样式不正常问题

 问题一、

在使用 vue2.0 +mint-ui 时pc端的样式没有问题但是手机端的就缩小了，失去了想要的效果

这是一个头文件的申明问题在入口文件index.html里的标签里加上这个代码即可

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue父子组件通信使用方法

mint-ui loadmore上拉加载与下拉刷新冲突处理方法

以上是Vue.js行動端元件庫使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！