基于vue-cli配置
然后使用vux的webpack配置
npm i vue-cli -g // 如果還沒(méi)安裝
vue init airyland/vux2 projectPath
cd projectPath
npm i
配置目的
- 利用手淘flexible布局澡屡，字體需要根據(jù)dpr看來(lái)改變大小
- 利用postcss-px2rem自動(dòng)轉(zhuǎn)換頁(yè)面中的rem咐旧，但是字體不轉(zhuǎn)換，border利用1px方案解決也不轉(zhuǎn)換
- 自動(dòng)添加瀏覽器兼容前綴
- 利用fastclick解決點(diǎn)擊延遲問(wèn)題
- 安裝postcss和scss還有l(wèi)ess室埋，不是我神經(jīng)病，是引用插件和個(gè)人習(xí)慣姚淆。
- 轉(zhuǎn)換vux的px為PX腌逢，因?yàn)閣eUI沒(méi)有使用rem，使用的是em和px搏讶，但是又不能把它的px給轉(zhuǎn)換成rem，而且vux還有一個(gè)1px.less腋颠，也不能把它的px轉(zhuǎn)換成大寫(xiě)吓笙。但是瀏覽器不管px是大小寫(xiě)，都能按照px解析絮蒿。
解決問(wèn)題1
npm i lib-flexible -S
然后在main.js使用
import 'lib-flexible'
到這里只是調(diào)用叁鉴，剩下的使用方法下面解決。
解決問(wèn)題2
首先運(yùn)行以下命令
npm i postcss-loader postcss-px2rem -D
因?yàn)閱?wèn)題3也是postcss的插件但壮，所以一起解決常侣。（如果你按照vux的webpack按照的，問(wèn)題3可省略）
再安裝
npm i autoprefixer -D
關(guān)于autoprefixer的配置自己查溯祸，可以查看如下文章
autoprefixer配置
然后在build的vue-loader.conf.js配置postcss
postcss: [
require('autoprefixer')({
browsers: ['iOS >= 7', 'Android >= 4.1']
}),require('postcss-px2rem')({
rootValue: 75, // 這里對(duì)應(yīng)的是750的設(shè)計(jì)圖尺寸
selectorBlackList: ['html'],
mediaQuery: true,
propBlackList: ['border-radius','border'] // 如果要保持font-size不轉(zhuǎn)換焦辅，替換為 ['font-size']
})
]
這里我的配置是基于手淘布局方案的椿胯，自己可以有自己的適配方案。
然后手淘方案有字體根據(jù)dpr動(dòng)態(tài)改變压状，所以書(shū)寫(xiě)CSS的時(shí)候要在后面加上注釋跟继，如下：
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}
因?yàn)槲遗渲昧薭order不轉(zhuǎn)換舔糖，所以/*no*/莺匠，可以不用加，加了也不頂用摇庙。但是字體一定要使用/*px*/這個(gè)注釋遥缕。這樣才能根據(jù)dpr改變字體大小。chrome的移動(dòng)端調(diào)試工具不支持dpr改變夕凝，所以可以手動(dòng)改變dpr查看效果户秤。
解決問(wèn)題4
如果你是按照上面一步步來(lái)的，問(wèn)題4已經(jīng)解決了转砖，如果不是按照來(lái)了鲸伴，應(yīng)該如下方法解決。
在main.js里面引入
import FastClick from 'fastclick'
FastClick.attach(document.body)
引入之前要安裝礁竞，我就不寫(xiě)了杉辙，如果你忘了還找不到錯(cuò)誤捶朵，真真的不適合這行。
解決問(wèn)題5
這個(gè)問(wèn)題不重復(fù)品腹，難的是安裝scss红碑，用下面的方法
npm i node-sass sass-loader scss-loader -D
解決問(wèn)題6
這是最難的泡垃，也是最煩的羡鸥，weUI竟然沒(méi)使用rem布局，用的px加em存和。
然后通過(guò)查找衷旅，發(fā)現(xiàn)有人解決方案很雞賊，最近發(fā)現(xiàn)的雞賊方案比較多茄袖，比如靜音播放沒(méi)有聲音的音頻這個(gè)粗暴解決方案有空也可以嘮嘮嘁锯。
題外話
微信iOS收款到賬語(yǔ)音提醒開(kāi)發(fā)總結(jié)
貼具體代碼吧，如果你是按照vux的webpack安裝的品山，只需要打開(kāi)webpack.base.conf.js文件烤低，然后把最下面的module.exports修改為以下內(nèi)容
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui', 'progress-bar', 'duplicate-style',{
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
}
}]
})
如果不是扑馁，那就這樣改涯呻，把module.exports的內(nèi)容改成以上內(nèi)容。
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原來(lái)的 module.exports 代碼賦值給變量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
參考文檔
- vux文檔
- npm網(wǎng)站
- 大漠的手淘布局方案flexible
- vux的github
