vant部署_vant ui rem配置流程
參考地址??https://www.cnblogs.com/WQLong/p/7798822.html
1.下載lib-flexible
使用的是vue-cli+webpack，通過npm來安裝的
npm i lib-flexible --save
2.引入lib-flexible
在main.js中引入lib-flexible
import ‘lib-flexible/flexible‘
3.設(shè)置meta標(biāo)簽
通過meta標(biāo)簽，設(shè)置設(shè)備寬度以及縮放比例
4.安裝px2rem-loader
npm install px2rem-loader
5.配置px2rem-loader
這里是重要的一步~~
在build文件中找到util.js，將px2rem-loader添加到cssLoaders中，如：
const cssLoader ={
loader:‘css-loader‘,
options: {
minimize: process.env.NODE_ENV=== ‘production‘,
sourceMap: options.sourceMap
}
}const px2remLoader ={
loader:‘px2rem-loader‘,
options: {
remUnit:75 //這里設(shè)置html根字體，vant-UI的官方根字體大小是37.5
}
}
同時，在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ?[cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]if(loader) {
loaders.push({
loader: loader+ ‘-loader‘,
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}if(options.extract) {returnExtractTextPlugin.extract({
use: loaders,
fallback:‘vue-style-loader‘})
}else{return [‘vue-style-loader‘].concat(loaders)
}
}
6.安裝?postcss-pxtorem
npm install postcss-pxtorem --save-dev
7.在根目錄找到.postcssrc.js文件? 插入一下代碼
‘a(chǎn)utoprefixer‘: {
browsers: [‘Android >= 4.0‘, ‘iOS >= 7‘] //添加瀏覽器前綴 安卓4.0版本，ios 7.0版本以上
},‘postcss-pxtorem‘: {
rootValue:37.5,
propList: [‘*‘]
}
}
8.重啟，一切ok~
當(dāng)配置完之后，只需要重啟下服務(wù)，就自動轉(zhuǎn)化為rem了
npm run dev
總結(jié)
以上是生活随笔為你收集整理的vant部署_vant ui rem配置流程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 融券利息怎么算
- 下一篇： java实验报告合肥工业大学_合肥工业大