So verwenden Sie das mobile Vue-cli-Webpack-Terminal, um rem automatisch zu erstellen

这次给大家带来如何使用Vue-cli webpack移动端自动化构建rem，使用Vue-cli webpack移动端自动化构建rem的注意事项有哪些，下面就是实战案例，一起来看一下。

Ich glaube, dass viele Freunde ihre mobilen Projekte automatisch in REM konvertieren möchten, was dem Front-End-Trend entspricht. Es ist sehr umständlich und fehleranfällig, Änderungen per Handschrift oder Editor-Plug-In vorzunehmen Bei der Online-Suche wurden die folgenden Probleme gefunden:

1 Ich habe das alte Video-Tutorial verfolgt und festgestellt, dass die verschiedenen Plug-In-Versionen von Node NPM Webpack px2rem unterschiedlich und überhaupt nutzlos sind

2 Die Tutorials im Internet waren mangelhaft und unvollständig, und es hat lange gedauert, bis ich es herausgefunden habe. Ich habe darüber nachgedacht, die CSSREM-Einstellungen von vscode manuell festzulegen, war aber immer noch nicht überzeugt, also habe ich es versucht Alles zusammen und schließlich herausgefunden, habe ich immer noch die folgende Methode recherchiert und hoffe, dass sie für alle hilfreich sein wird, um automatisch REM für mobile Endgeräte zu erstellen

1 Installieren Sie vue-cli. Ich werde nicht näher darauf eingehen. Jeder sollte es wissen

2 Installation und Konfiguration von px2rem-loader (Ich habe hier viele Probleme ohne Postcss versucht, mich aber für dieses entschieden)

Der erste Schritt: NPM-Installation px2rem-loader

Der zweite Teil: Fügen Sie Objekte unter webpack.base.conf.js hinzu. Wenn Sie andere verwenden, befolgen Sie einfach die folgenden Regeln

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

Der dritte Schritt: Fügen Sie etwas zu den Plugins unter dev.conf.js hinzu. Bei Apple 5 muss jeder auf das remUnit-Attribut achten Als 40 hier, und einige Leute setzen es als 80. Die 40 hier ist für die Verwendung mit hotcss. Ich werde über den vierten Teil von

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

sprechen: Das ist etwas, das viele Leute nicht wissen . Viele Leute verpassen diesen Schritt einfach. Suchen Sie den const cssLoader unter utils.js und fügen Sie ?importLoaders=1 hinzu

Ausgabeschriftgröße:1rem (unter iPhone)

3 Wir alle wissen, dass das Pixelverhältnis von Geräten unterschiedlich ist, daher verwenden wir hotcss, um den Link zum Pixelverhältnis anzupassen Gerät

Ich habe es in src/assets/js/ abgelegt und Sie können es an Ihre Gewohnheiten anpassen

Stellen Sie die Methode vor, Sie können hier einen beliebigen Namen definieren Ich habe hotcss.js in viewport.js geändert

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

So sind Sie fertig

Ich glaube, Sie haben diesen Artikel gelesen. Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie JS, um das maximale Element eines Arrays vom Typ „Zahl“ zu finden

Wie man es richtig macht Verwenden Sie das Vuex-Projektstrukturverzeichnis und die Konfiguration

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das mobile Vue-cli-Webpack-Terminal, um rem automatisch zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!