基於Vue-cli和Vux的webpack配置

基於vue-cli配置
而後使用vux的webpack配置

npm i vue-cli -g // 若是還沒安裝
vue init airyland/vux2 projectPath

cd projectPath
npm i複製代碼

配置目的

1. 利用手淘flexible佈局，字體須要根據dpr看來改變大小
2. 利用postcss-px2rem自動轉換頁面中的rem，可是字體不轉換，border利用1px方案解決也不轉換
3. 自動添加瀏覽器兼容前綴
4. 利用fastclick解決點擊延遲問題
5. 安裝postcss和scss還有less，不是我神經病，是引用插件和我的習慣。
6. 轉換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 代碼賦值給變量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})複製代碼

參考文檔

1. vux文檔
2. npm網站
3. 大漠的手淘佈局方案flexible
4. vux的github