原文: juejin.im
基于vue-cli配置
然后使用vux的webpack配置
npm i vue-cli -g // 如果还没安装
vue init airyland/vux2 projectPath
cd projectPath
npm i
配置目的
- 利用手淘flexible布局，字体需要根据dpr看来改变大小
- 利用postcss-px2rem自动转换页面中的rem，但是字体不转换，border利用1px方案解决也不转换
- 自动添加浏览器兼容前缀
- 利用fastclick解决点击延迟问题
- 安装postcss和scss还有less，不是我神经病，是引用插件和个人习惯。
- 转换vux的px为PX，因为weUI没有使用rem，使用的是em和px，但是又不能把它的px给转换成rem，而且vux还有一个1px.less，也不能把它的px转换成大写。但是浏览器不管px是大小写，都能按照px解析。
解决问题1
npm i lib-flexible -S
然后在main.js使用
import 'lib-flexible'
到这里只是调用，剩下的使用方法下面解决。
解决问题2
首先运行以下命令
npm i postcss-loader postcss-px2rem -D
因为问题3也是postcss的插件，所以一起解决。（如果你按照vux的webpack按照的，问题3可省略）
再安装
npm i autoprefixer -D
关于autoprefixer的配置自己查，可以查看如下文章
autoprefixer配置
然后在build的vue-loader.conf.js配置postcss
postcss: [
require('autoprefixer')({
browsers: ['iOS >= 7', 'Android >= 4.1']
}),require('postcss-px2rem')({
rootValue: 75, // 这里对应的是750的设计图尺寸
selectorBlackList: ['html'],
mediaQuery: true,
propBlackList: ['border-radius','border'] // 如果要保持font-size不转换，替换为 ['font-size']
})
]
这里我的配置是基于手淘布局方案的，自己可以有自己的适配方案。
然后手淘方案有字体根据dpr动态改变，所以书写CSS的时候要在后面加上注释，如下：
.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;
}
因为我配置了border不转换，所以/*no*/，可以不用加，加了也不顶用。但是字体一定要使用/*px*/这个注释。这样才能根据dpr改变字体大小。chrome的移动端调试工具不支持dpr改变，所以可以手动改变dpr查看效果。
解决问题4
如果你是按照上面一步步来的，问题4已经解决了，如果不是按照来了，应该如下方法解决。
在main.js里面引入
import FastClick from 'fastclick'
FastClick.attach(document.body)
引入之前要安装，我就不写了，如果你忘了还找不到错误，真真的不适合这行。
解决问题5
这个问题不重复，难的是安装scss，用下面的方法
npm i node-sass sass-loader scss-loader -D
解决问题6
这是最难的，也是最烦的，weUI竟然没使用rem布局，用的px加em。
然后通过查找，发现有人解决方案很鸡贼，最近发现的鸡贼方案比较多，比如静音播放没有声音的音频这个粗暴解决方案有空也可以唠唠。
贴具体代码吧，如果你是按照vux的webpack安装的，只需要打开webpack.base.conf.js文件，然后把最下面的module.exports修改为以下内容
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')
}
// 自定义的全局样式大部分不需要转换
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')
}
// 避免转换1PX.less文件路径
if (source.indexOf('1PX.less') > -1) {
source = source.replace(/1PX.less/g, '1px.less')
}
return source
}
}]
})
如果不是，那就这样改，把module.exports的内容改成以上内容。
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
参考文档
- vux文档
- npm网站
- 大漠的手淘布局方案flexible
- vux的github
另外：
vue+vux+es6+webpack移动端常用配置步骤
- 创建项目（vue项目的流程就不多讲了）**
- cnpm install vux --save**
- 在build/webpack.base.conf.js配置：
const vuxLoader = require('vux-loader')
把第一个module.exports赋值变量**let webpackConfig** ={里面代码不动}
然后这个放在最底部去
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 以正确进行语言文件读取
7.index.html入口页面<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
8.main.js里面配置：
（需要安装依赖cnpm install fastclick --save）
const FastClick = require('fastclick')
FastClick.attach(document.body) //去掉点击延迟300秒
（需要安装依赖cnpm install axios --save）
const axios = require('axios')
Vue.prototype.$ajax = axios;
9.index.html里面引入rem自适应布局的js，有需要用jq的也在这里引入以保证性能。
网友评论