1.使用vue-cli新建一个vue项目
npm install -g vue-cli
vue init webpack project
2.安装vux所需依赖
npm install vux --save
npm install vux-loader --save-dev
//编译less源码
npm install less less-loader --save-dev
//安装 yaml-loader 以正确进行语言文件读取
npm install yaml-loader --save-dev
3.在build/webpack.base.conf.js文件中添加如下配置:
// 原来的module.exports = {}配置
let webpackConfig = {}
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [
'vux-ui',
'progress-bar',
{
name: 'duplicate-style',
options: {
cssProcessorOptions : {
safe: true,
zindex: false,
autoprefixer: {
add: true,
browsers: [
'iOS >= 7',
'Android >= 4.1'
]
}
}
}
}
]
})
4.安装优化插件
4.1在webpack.base.conf.js添加, 可以在构建后去除重复css代码(通过配置vux-loader实现,步骤三中代码已加入)
plugins: [{
name: 'duplicate-style'
}]
4.2安装fastclick,移除移动端点击延迟
npm install fastclick -S
//在main.js中引入
import FastClick from 'fastclick'
FastClick.attach(document.body);