Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】

今天，我们使用Vue CLI3 做一个移动端适配。

前言

首先确定你的项目是Vue CLI3版本以上的。

一、移动端适配包

1、安装移动端适配包

npm i lib-flexible -S
复制代码

2、在main.js引入适配包

import Vue from 'vue'
import App from './App.vue'

import 'lib-flexible'  // 引入适配包

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

复制代码

3、在index.html编辑viewport

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 加上以下代码 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">   
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

复制代码

二、CSS样式适配

1、安装px2rem-loader包（只适用于css样式）

npm i px2rem-loader -D
复制代码

2、在vue.config.js配置

module.exports={
	    chainWebpack: config => {
        config.module
        .rule('css')
          .test(/\.css$/)
          .oneOf('vue')
          .resourceQuery(/\?vue/)
          .use('px2rem')
            .loader('px2rem-loader')
            .options({
              remUnit: 75
            })
    },
}
复制代码

三、CSS预处理语言样式适配

1、安装postcss-plugin-px2rem（适用于css预处理语言）

npm i postcss-plugin-px2rem -D
复制代码

2、在vue.config.js配置

module.exports={
	   css: {
      loaderOptions: {
        postcss: {
          plugins: [
              require('postcss-plugin-px2rem')({
                  rootValue: 75, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                  // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                  //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                  // propBlackList: [], //黑名单
                  exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                  // selectorBlackList: [], //要忽略并保留为px的选择器
                  // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                  // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                  mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
                  minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
              }),
          ]
      }
    }
    }
}
复制代码

3、在package.json配置，加入postcss 相关插件

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "lib-flexible": "^0.3.2",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.14.0",
    "postcss-plugin-px2rem": "^0.8.1",
    "px2rem-loader": "^0.1.9",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "precss": {}
    }
  }
}

复制代码

结语

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路

来源：oschina

链接：https://my.oschina.net/u/4390903/blog/4255479

标签

px2rem

Vue CLI

postcss

Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】

前言

一、移动端适配包

二、CSS样式适配

三、CSS预处理语言样式适配

结语

Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】