您好,登錄后才能下訂單哦!
這篇文章主要介紹在前端html5中mandMobile怎么用,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
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,可能是默認(rèn)值為true吧
}]
]
};
配置之后,你可以直接在項目中這樣使用了: import { Button } from 'mand-mobile';
這樣組件和樣式都是按需引入了,而且相對來說少寫了幾行代碼,如果引入的組件多的情況下配置一下還是比較有用的。
3. 配置postcss.config.js或者.postcssrc.js
module.exports = {
plugins: [
require('postcss-pxtorem')({
rootValue: 75, // 結(jié)果為:設(shè)計稿元素尺寸/75
minPixelValue: 2, // 小于等于 2 的元素不做處理
propWhiteList: []
})
]
}
如果想要忽略單個屬性不做轉(zhuǎn)化,最簡單的方法是在像素單元聲明中使用大寫PX,例如有些字體不需要轉(zhuǎn)換。至此,項目接入該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
所以我們只需要引入這些變量,樣式就可以正常顯示了,然后我們通過覆蓋這些變量的值就可以改變主題了。關(guān)鍵是我們要如何引入這些變量。
根據(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
中設(shè)置這些值,就可以自定義主題了。
5. 項目開始
如果有些屬性沒有生效,看看是不是UI庫版本太低了
以上是“在前端html5中mandMobile怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。