基于vue-cli配置
然后使用vux的webpack配置

npm i vue-cli -g // 如果还没安装
vue init airyland/vux2 projectPathcd 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。
然后通过查找，发现有人解决方案很鸡贼，最近发现的鸡贼方案比较多，比如静音播放没有声音的音频这个粗暴解决方案有空也可以唠唠。

题外话
微信iOS收款到账语音提醒开发总结

贴具体代码吧，如果你是按照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 代码赋值给变量 webpackConfigmodule.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的也在这里引入以保证性能。

基于Vue-cli和Vux的webpack配置相关推荐

vue项目通过命令行传参实现多环境配置(基于@vue/cli)
大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run ...
基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
vue 配置【详解】 vue.config.js （含 webpack 配置）
目录常用配置完整配置使用 vue-cli 3.x 以上的脚手架创建的 vue 项目不再有 build文件夹,若需要进行相关配置,需在项目目录下新建文件 vue.config.js 常用配置 // ...
vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。...
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
怎么把HTML网页重构为VUE,基于vue cli重构多页面脚手架过程详解
官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考. ...
Vue CLI 3结合Lerna进行UI框架设计
第一次在掘金发文章,有点啰里啰嗦,大家见谅. 当前大部分UI框架设计的Webpack配置都相对复杂,例如Element.Ant Design Vue和Muse-UI等Vue组件库.例如Element, ...
使用Vue CLI 3提升您的Vue.js工作流程
没有命令行界面(CLI)工具的帮助,我们几乎无法想象现代Web开发. 通过减少重复繁琐的任务,它们极大地促进并加快了开发流程. 手动设置项目,具有所有的上线,构建,测试,预处理,优化和依赖项跟踪功能, ...
linux 使用ssr客户端_【第一期】基于 @vue/cli3 与 koa 创建 ssr 工程
什么是基于同构代码的 SSR 服务(Server-side rendering based on isomorphic code) 首先,我们需要先明白什么是 spa (single page app ...
vue cli 4 多环境_Vue 笔记整理19
19.1 vue-cli起步 19.1.1 什么是vue-cli Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: - 通过 @vue/cli 搭建交互式的项目脚手架. - 通 ...

基于Vue-cli和Vux的webpack配置

vue+vux+es6+webpack移动端常用配置步骤

基于Vue-cli和Vux的webpack配置相关推荐

最新文章

热门文章