原文: juejin.im
基于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í)候要在后面加上注釋?zhuān)缦拢?/p>
.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è)粗暴解決方案有空也可以嘮嘮。
題外話(huà)
微信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
另外：
vue+vux+es6+webpack移動(dòng)端常用配置步驟
- 創(chuàng)建項(xiàng)目（vue項(xiàng)目的流程就不多講了）**
- cnpm install vux --save**
- 在build/webpack.base.conf.js配置：
const vuxLoader = require('vux-loader')
把第一個(gè)module.exports賦值變量**let webpackConfig** ={里面代碼不動(dòng)}
然后這個(gè)放在最底部去
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
})
4.安裝vux-loader使用命令cnpm install vux-loader -D
5.cnpm install less less-loader --save-dev 以正確編譯less源碼
6.cnpm install yaml-loader --save-dev 以正確進(jìn)行語(yǔ)言文件讀取
7.index.html入口頁(yè)面<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
8.main.js里面配置：
（需要安裝依賴(lài)cnpm install fastclick --save）
const FastClick = require('fastclick')
FastClick.attach(document.body) //去掉點(diǎn)擊延遲300秒
（需要安裝依賴(lài)cnpm install axios --save）
const axios = require('axios')
Vue.prototype.$ajax = axios;
9.index.html里面引入rem自適應(yīng)布局的js，有需要用jq的也在這里引入以保證性能。
