資訊專欄INFORMATION COLUMN
摘要：最近在寫移動(dòng)端項(xiàng)目就想用，來進(jìn)行適配把轉(zhuǎn)換成但是也用到了第三方組件庫把這個(gè)引入發(fā)現(xiàn)一個(gè)問題就是的組件都縮小了在網(wǎng)上找不到答案最后在一個(gè)開發(fā)群里找到了解決的方法目前的處理方法是將組件中轉(zhuǎn)化為，避免被轉(zhuǎn)成在中中配置以下代碼自定義的全局
最近在寫移動(dòng)端項(xiàng)目,就想用lib-flexable，px2rem來進(jìn)行適配,把px轉(zhuǎn)換成rem但是也用到了第三方UI組件庫vux,把這個(gè)引入發(fā)現(xiàn)一個(gè)問題就是vux的組件都縮小了,在網(wǎng)上找不到答案,最后在一個(gè)vue開發(fā)群里找到了解決的方法,目前的處理方法是將vux組件中px轉(zhuǎn)化為PX，避免被轉(zhuǎn)成rem
在webpack.base.conf.js中 vuxLoader中配置以下代碼{
name: "vux-ui"
},
{
name: "after-less-parser",
fn: function (source) {
if (this.resourcePath.replace(//g, "/").indexOf("vux/src/components") > -1) {
source = source.replace(/px/g, "PX")
}
// 自定義的全局樣式大部分不需要轉(zhuǎn)換
if (this.resourcePath.replace(//g, "/").indexOf("App.vue") > -1) {
source = source.replace(/px/g, "PX").replace(/-1PX/g, "-1px")
}
return source
}
},
{
name: "style-parser",
fn: function (source) {
if (this.resourcePath.replace(//g, "/").indexOf("vux/src/components") > -1) {
source = source.replace(/px/g, "PX")
}
// 避免轉(zhuǎn)換1PX.less文件路徑
if (source.indexOf("1PX.less") > -1) {
source = source.replace(/1PX.less/g, "1px.less")
}
return source
}
}
如果是使用cnpm的 就需要把/vux/components那段 要改成vux/components
使用vue-cli 3.x的,在vue.config.js 配置以下代碼configureWebpack: config => {
require("vux-loader").merge(config, {
plugins: [{
name: "vux-ui"
},{
name: "after-less-parser",
fn: function (source) {
if (this.resourcePath.replace(//g, "/").indexOf("/vux/src/components") > -1) {
source = source.replace(/px/g, "PX")
//資源中有引入1px.less文件的，上面也會(huì)將文件名替換成1PX.less，所以要替換回來避免構(gòu)建報(bào)錯(cuò)
source = source.replace(/1PX.less/g,"1px.less");
}
// 自定義的全局樣式大部分不需要轉(zhuǎn)換
return source
}
},{
name: "style-parser",
fn: function (source) {
if (this.resourcePath.replace(//g, "/").indexOf("/vux/src/components") > -1) {
source = source.replace(/px/g, "PX")
source = source.replace(/1PX.less/g,"1px.less");
}
return source
}
}]
})
}
來源
** https://github.com/airyland/v... , 此方法是vux作者提供的解決方法
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53187.html
摘要：做移動(dòng)端時(shí)，適配是必須的。使用單位，可在不同屏幕上完美顯示相同的布局。文件首先要把轉(zhuǎn)成正常的，在交給來做，所以是外還需要加上一個(gè)設(shè)計(jì)稿寬度表示轉(zhuǎn)換過程小數(shù)保留幾位。安裝配置結(jié)束后，重啟項(xiàng)目。會(huì)發(fā)現(xiàn)自己設(shè)置的被轉(zhuǎn)為了。 做移動(dòng)端時(shí)，適配 是必須的。使用rem單位，可在不同屏幕上完美顯示相同的布局。px2rem 插件方便的將px單位轉(zhuǎn)為了rem。 1. 自己手動(dòng)構(gòu)建vue webpck配置...
摘要：這應(yīng)該是項(xiàng)目在適配移動(dòng)端時(shí)候，最簡單的方法之一下面是基本步驟使用下載并引入在中引入將添加到在中添加如下配置代碼如下這個(gè)是重點(diǎn)，設(shè)計(jì)稿是完了就可以直接用做單位按照的設(shè)計(jì)稿擼代碼了， 這應(yīng)該是vue項(xiàng)目在適配移動(dòng)端時(shí)候，最簡單的方法之一下面是基本步驟（使用cnpm）1.下載并引入lib-flexible cnpm install --save lib-flexible 在main.js中 ...
摘要：這應(yīng)該是項(xiàng)目在適配移動(dòng)端時(shí)候，最簡單的方法之一下面是基本步驟使用下載并引入在中引入將添加到在中添加如下配置代碼如下這個(gè)是重點(diǎn)，設(shè)計(jì)稿是完了就可以直接用做單位按照的設(shè)計(jì)稿擼代碼了， 這應(yīng)該是vue項(xiàng)目在適配移動(dòng)端時(shí)候，最簡單的方法之一下面是基本步驟（使用cnpm）1.下載并引入lib-flexible cnpm install --save lib-flexible 在main.js中 ...
摘要：一般需用這個(gè)在后面添加會(huì)根據(jù)的不同，生成三套代碼。如果明白了這些方法，就沒必要再配置的了，因?yàn)橄旅娴姆椒ǜ菀卓刂仆獠恳氲氖欠裥枰D(zhuǎn)，而更改就控制不了了，它會(huì)強(qiáng)制轉(zhuǎn)換。能正常轉(zhuǎn)換不能正常轉(zhuǎn)換不能正常轉(zhuǎn)換 基于vue-cli配置手淘的lib-flexible + rem，實(shí)現(xiàn)移動(dòng)端自適應(yīng) 沒接觸過flexible的建議先看看大漠的這篇文章這樣你才會(huì)知道長度為什么用rem，而字體要用px...
閱讀 2106·2021-11-05 09:42
閱讀 2851·2021-09-23 11:21
閱讀 2841·2019-08-30 14:00
閱讀 3314·2019-08-30 13:15
閱讀 465·2019-08-29 17:18
閱讀 3547·2019-08-29 16:29
閱讀 2749·2019-08-29 14:06
閱讀 2794·2019-08-23 14:41
