vux手动配置

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);

你可能感兴趣的:(vux手动配置)