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 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 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
php递归列出所有文件和目录的代码
2008/09/10 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python中as用法实例分析
2015/04/30 Python
python3中int(整型)的使用教程
2017/03/23 Python
Python书单 不将就
2017/07/11 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
心得体会范文
2014/01/04 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
python保存图片的四个常用方法
2022/02/28 Python
Java详细解析==和equals的区别
2022/04/07 Java/Android