標籤:width richtext 出現 完成 簡化 highlight doc plugin src
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。
基於VUE.JS的移動端架構Mint UI