Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)


Posted in Javascript onApril 27, 2020

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

Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem) 

前言

首先确定你的项目是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" rel="external nofollow" >
 <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)的文章就介绍到这了,更多相关Vue CLI3移动端适配内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript与CSS复习(三)
Jun 29 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 #Javascript
JS严格模式原理与用法实例分析
Apr 27 #Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 #Javascript
详解elementUI中input框无法输入的问题
Apr 27 #Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 #Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 #Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 #Javascript
You might like
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP中soap的用法实例
2014/10/24 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
PHP反射基础知识回顾
2020/09/10 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python时间获取及转换知识汇总
2017/01/11 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
python统计文章中单词出现次数实例
2020/02/27 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
劲霸男装广告词改编版
2014/03/21 职场文书
药剂专业求职信
2014/06/20 职场文书
2014教师年度工作总结
2014/11/10 职场文书
先进个人材料怎么写
2014/12/30 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL