Mand Mobile使用小記

mandMobile是滴滴開源的專門面向金融場景的Vue移動端UI組件庫（非金融類也可以用），最近我司正在孵化一個金融類產(chǎn)品，本人準備使用。

對初次使用者來說，按照官方文檔 來，多少會踩一些坑或者不順暢，下面是我初次使用之后的總結。另外，本小記也會持續(xù)更新，記錄使用中的各種問題。如果各位在使用中也遇到了問題，歡迎留言交流，我們一起提bug:smile:哈哈哈。

1. 首先安裝

npm i mand-mobile -S

2. 引入

全局引入

如果使用  import { Button } from 'mand-mobile'; 的寫法會引入 mand-mobile 下所有的模塊.

為了提高提升打包和瀏覽器下載速度，推薦使用 按需引入

你可以通過以下方式按需引入

import Button from 'mand-mobile/lib/button'import 'mand-mobile/lib/mand-mobile.css'  // 樣式單獨引入

這樣可以將組件按需引入，但是樣式還是全部引入。

更好的方法是使用 插件 babel-plugin-import

安裝插件 cnpm i babel-plugin-import --save-dev
使用插件，添加babel.config.js或者.babelrc.js文件，添加以下配置

module.exports = {    "plugins": [        ["import", {          "libraryName": "mand-mobile",          "libraryDirectory": "lib",          "style": true              // 文檔說無需配置style，可能是默認值為true吧        }]    ] };

配置之后，你可以直接在項目中這樣使用了： import { Button } from 'mand-mobile';

這樣組件和樣式都是按需引入了，而且相對來說少寫了幾行代碼，如果引入的組件多的情況下配置一下還是比較有用的。

3. 配置postcss.config.js或者.postcssrc.js

module.exports = {  plugins: [    require('postcss-pxtorem')({      rootValue: 75,    // 結果為：設計稿元素尺寸/75      minPixelValue: 2,  // 小于等于 2 的元素不做處理      propWhiteList: []    })  ]}

如果想要忽略單個屬性不做轉化，最簡單的方法是在像素單元聲明中使用大寫PX，例如有些字體不需要轉換。至此，項目接入該UI庫完成。

4. 如何定制主題

我們有兩種方式定制主題：一種是css樣式覆蓋，一種是樣式變量覆蓋

第一種方式是我們自己寫一套樣式主題，然后全局引入，強行覆蓋掉原來的樣式，稍微有點不太優(yōu)雅，但是也沒什么不可以的。

第二種是文檔上介紹的，即覆蓋樣式變量 ，這種方式需要我們做一些配置：

首先修改 babel.config.js，將libraryDirectory的值改為 "components"，components這個文件夾存放的是所有組件。改完之后重新運行，這時候你會發(fā)現(xiàn)你的樣式都沒有了，原因是 components中少了一些東西，可以跟lib文件夾對比一下，例如下圖所示是lib文件夾下的而components沒有這些，如果這時你加上  import 'mand-mobile/lib/mand-mobile.css'; 樣式就可以出現(xiàn)了，但是不能加上它，因為我們要通過覆蓋樣式變量的方式來定制主題。   

如何覆蓋呢？其實components中的組件是有樣式的，只不過這些樣式的值都是樣式變量，而組件內(nèi)部并沒有引入變量，比如看下Button的源碼，它的其中一些樣式是這樣的

.md-button  position relative  display block  height button-height   // 樣式變量  line-height button-height  // 樣式變量  font-size button-font-size  // 樣式變量  font-weight button-font-weight  // 樣式變量  font-family font-family-normal  text-align center  border none  border-radius button-radius  // 樣式變量  box-sizing border-box

所以我們只需要引入這些變量，樣式就可以正常顯示了，然后我們通過覆蓋這些變量的值就可以改變主題了。關鍵是我們要如何引入這些變量。

根據(jù)文檔，首先我們新建自定義主題文件，如 theme.custom.styl, 然后在這里引入樣式變量

@import '~mand-mobile/components/_style/mixin/util'@import '~mand-mobile/components/_style/mixin/theme.components'@import '~mand-mobile/components/_style/mixin/theme.basic'// 安裝并引入css拓展nib(可選)@import '~nib/lib/nib/vendor'@import '~nib/lib/nib/gradients'

引入之后還需配置一下webpack讓它在我們的項目中生效，我是用的是vue-cli3，所以在vue.config.js中做如下配置：

module.exports = {  css: {    loaderOptions: {      stylus: {        import: [resolve(`.src/assets/theme.custom`)]  // 根據(jù)你項目的實際情況配置路徑      }    }  }}

這個時候基本上就可以了，但是還有一個樣式文件需要引入，就是全局樣式，因為是在component文件夾，so這個樣式也要我們單獨引入進來，在你的入口文件(mian.is)加入以下代碼即可

import 'mand-mobile/components/_style/global.styl'

參考

全局樣式變量   和 組件樣式變量 ，在  theme.custom.styl  中設置這些值，就可以自定義主題了。

5. 項目開始

如果有些屬性沒有生效，看看是不是UI庫版本太低了

6. 小結

其實，總體而言，mandMobile還是相當貼心的，提供的組件也很豐富且靈活，相信它在金融類產(chǎn)品中使用它還是很香的，推薦大家使用，畢竟金融類產(chǎn)品的業(yè)務邏輯還是比較復雜的。

 到此這篇關于Html5踩坑記之mandMobile使用小記的文章就介紹到這了,更多相關Html5使用mandMobile內(nèi)容請搜索武林網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持武林網(wǎng)！