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": {}

    }

  }

}

Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】的更多相关文章

  1. 基于vue-cli的vue项目移动端样式适配，lib-flexible和postcss-px2rem

    安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...

  2. 基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem

    1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --sa ...

  3. vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题

    公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...

  4. 基于Vue/React项目的移动端适配方案

    本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...

  5. vue中使用vw适配移动端

    推荐看看大漠老师的文章,非常的有收获 如何在Vue项目中使用vw实现移动端适配 1.首先在项目中安装依赖 npm i postcss-aspect-ratio-mini postcss-px-to-v ...

  6. 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...

  7. vue.js移动端配置flexible.js

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...

  8. web开发中移动端适配

    这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮 ...

  9. 【前端适配】vw单位移动端适配方案

    近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...

随机推荐

  1. JAVA各种OOM代码样例及解决方法

    周末了,觉得我还有很多作业没有写,针对目前大家对OOM的类型不太熟悉,那么我们来总结一下各种OOM出现的情况以及解决方法. 我们把各种OOM的情况列出来,然后逐一进行代码编写复现和提供解决方法. 1. ...

  2. 设计模式：mediator模式

    目的:解决多组件之间的通信问题,使得组件之间的通信变得简单 核心:提供一个管理类,用来处理组件之间的通信,所有的组件只和管理类通信,组件彼此之间不在单独通信 例子: class Mediator { ...

  3. Java应用服务器之tomcat会话复制集群配置

    会话是识别用户,跟踪用户访问行为的一个手段,通过cookie(存在客户端)或session(存在服务端)来判断本次请求是那个客户端发送过来:常用的会话保持有绑定会话,就是前边我们聊的在代理上通过算法或 ...

  4. Horse Pro（带负坐标的bfs搜索）

    Horse Pro bfs搜索,但图中存在负值坐标,两种方法解决. 用数组标记,将原点设为300,300 用map标记 http://oj.jxust.edu.cn/contest/Problem?i ...

  5. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    版本的问题 重新输入 npm install 再输入 npm run serve重启,如果还是不可以的话,在把之前装的都清空 依次输入以下命令 rm -rf node_modulesrm packag ...

  6. NanoHTTPD服务

    需要导入nanohttpd2.3,jar包 继承NanoHTTPD public class HttpServer extends NanoHTTPD { public HttpServer(int ...

  7. 自述：转职IT ，痛苦一阵子；不转职IT，痛苦一辈子（第一章）

    作为一个从后期制作转职过来的Java工程师,我认为我是幸运的,虽然我的本科专业(影视后期)也是火爆行业,不愁工作,但我不后悔进入这个IT坑,毕竟转行,只痛苦一阵子,但是不转行,可能我会痛苦一辈子. 我 ...

  8. PHP getimagesizefromstring - 获取图片信息函数

    getimagesizefromstring — 从字符串中获取图像尺寸信息.高佣联盟 www.cgewang.com 语法 array getimagesizefromstring ( string ...

  9. C/C++编程笔记：C语言对齐问题【结构体、栈内存以及位域对齐】

    引言 考虑下面的结构体定义: 假设这个结构体的成员在内存中是紧凑排列的,且c1的起始地址是0,则s的地址就是1,c2的地址是3,i的地址是4. 现在,我们编写一个简单的程序: 运行后输出: 为什么会这 ...

  10. zabbix 邮件报警和微信报警

    # 邮件报警 一.定义邮件发件人 #密码来源 完成操作会看到 二.定义邮件收件人 三.启动动作 #先开启 2.触发操作 3.恢复操作 4.开启发送消息 1.2. 微信报警 一. 首先要注册一个企业微信 ...