vue-cliとvuxベースのwebpack構成

vue-cli構成に基づいてvuxのwebpack構成を使用

npm i vue-cli -g //       
vue init airyland/vux2 projectPath

cd projectPath
npm i

構成の目的

ハンドヘルドflexibleレイアウトを利用して、フォントはdprから見ると

サイズを変更する必要がある.

postcss-px 2 rem自動変換ページのremを利用するが、フォントは変換せず、borderは1 pxソリューションで

も変換しない.

ブラウザ互換接頭辞

を自動的に追加

fastclickによるクリック遅延問題の解決

postcssとscssとlessをインストールしてlessがあって、私の神経病ではありませんて、プラグインと個人の習慣を引用します.

vuxのpxをPXに変換します.weUIはremを使用していないので、emとpxを使用していますが、pxをremに変換することはできません.また、vuxには1 px.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の構成については、以下の記事を参照してください.
次に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']
})

リファレンスドキュメント

vuxドキュメント

npm Webサイト

砂漠のハンドヘルドレイアウト案flexible

vuxのgithub