项目笔记整理04-vue-cli4.0移动端适配*3

vue-cli4.0移动端适配*3

1.第一/二种方案(常用)——px转rem适配方案

使用px转成rem：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备。

（1）第一步：

yarn add lib-flexible 或者 npm install lib-flexible(公共)

在main.js引入中：import 'lib-flexible/flexible.js'

（2.1）第二步第一种方法：安装postcss-px2rem

yarn add postcss-loader postcss-px2rem
npm install --save-dev postcss-loader postcss-px2rem(推荐此方案)
然后在配置文件中配置，(我是在根目录新建 vue.config.js并在其中配置的，也可在package.json中配置)

 module.exports = {
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                // options here will be passed to postcss-loader
                plugins: [require('postcss-px2rem')({
                    remUnit: 75
                })]
            }
        }
    }
}

（2.2）第二步第二种方法：安装postcss-pxtorem

yarn add postcss-pxtorem 或 npm install postcss-pxtorem --save
如果配置文件是package.json(在你创建vue项目时，会让你选择配置文件)，则在package.json内，添加postcss：

 "postcss": {
   "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
           "rootValue": 75,   // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均需要删除）
           "propList":["*"]   // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
},

如果配置文件是自定义配置文件，则在配置文件vue.config.js中，并配置如下信息:

module.exports = {
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            "postcss": {
                "plugins": {
                    "autoprefixer": {},
                    "postcss-pxtorem": {
                        "rootValue": 75,   
                        "propList":["*"]   
                    }
                }
            }
        }
    }
}

(3)公共设置：在index.html中配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no">

2.与vant搭配的适配版

(1)npm install amfe-flexible --save-dev

(2)在main.js中配置引入import 'amfe-flexible';

(3)npm install postcss-pxtorem -D

(4)在index.html中配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no">

(5)在vue.config.js中配置

 const autoprefixer = require('autoprefixer');
 const pxtorem = require('postcss-pxtorem');

 module.exports = {
   publicPath:'/',    /*根路径*/
   outputDir: 'dist',/*构建输出目录*/
   assetsDir: 'assets',  /*静态资源目录(js,css,img,fonts)*/
   // lintOnSave:false,   /*是否开启eslint保存检测(严格模式)，有效值：true||false||'error'*/
   publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',
   css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,//此处设置为37.5后则为1：1比例
            propList: ['*']
          })
        ]
      }
    }
  },
 }

(6)在babel.config.js中设置

module.exports = {
   presets: ['@vue/cli-plugin-babel/preset'],
   plugins: [
    [
      'import',{ 
        libraryName: 'vant', 
        libraryDirectory: 'es', 
        style: true 
      },'vant']
  ]
};