vue cli3.x 项目中引入 vux（一）：手动配置

最近做的一个项目，是使用vux组件库开发的，使用的时候发现vux在使用的时候需要做一些相应的配置，记录如下：

建议 node.js 版本在 7.6.0 以上。

---

1、引入vux

# npm install vux --save

2、vux2必须配合 vux-loader 使用，所以需要引入vux-loader

# npm install vux-loader --sava--dev

3、安装less-loader

# npm install less lessloader --sava--dev

4、安装 yaml-loader 以正确进行语言文件读取

# npm install yaml-loader --sava--dev

5、安装 vue loader，用于编译 .vue 文件，官方模板已经帮你配置好。

# npm install vue-loader --save-dev

6、在项目根目录创建vue.config.js进行相关配置

module.exports = {
    // ...

    // configureWebpack:
    // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
    // 如果这个值是一个函数，则会接收被解析的配置作为参数。
    configureWebpack: config => {
        // vux2必须配合vux-loader使用
        require('vux-loader').merge(config, {
            options: {},
            plugins: [{
                name: 'vux-ui'      // 配置babel-loader以正确编译 VUX 的js源码
            },
            {
                name: 'duplicate-style'  // 在构建后去除重复css代码（通过配置vux-loader实现）
            },
            { 
                name: 'less-theme',     // 主题颜色配置: 主题文件不能引入其他less文件，只能为简单变量列表。
                path: 'src/style/theme-expand.less'
            }
            ]
        })
    }

    // ...
}

7、配置需适配的浏览器

（1）Vue 官方模板的设置是 last 2 versions，可能会导致你在某些 Android 机子上出现问题。

如果你使用 last 7 versions 会生成不必要的 -ms 前缀代码.

建议使用配置 ['iOS >= 7', 'Android >= 4.1']

// package.json

// ...
"browserslist": [
    "Android >= 4.0",
    "iOS >= 7"
]

 （2）也可以在 vux-loader 的 duplicate-style 插件中配置：

// vue.config.js

// ...
// configureWebpack -> vux-loader -> plugins 中添加如下配置（以下配置摘自官方文档）
{
  name: 'duplicate-style',
  options: {
    cssProcessorOptions : {
      safe: true,
      zindex: false,
      autoprefixer: {
        add: true,
        "browsers": [
          "iOS >= 7",
          "Android >= 4.1"
        ]
      }
    }
  }
}

8、目前用到有这些，其他相关配置请前往官方文档-vux手动配置使用