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实现的分页函数
Dec 22 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
在node中如何使用 ES6
Apr 22 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 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
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
常用PHP封装分页工具类
2017/01/14 PHP
js玩一玩WSH吧
2007/02/23 Javascript
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python K近邻算法的kd树实现
2018/09/06 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
const和static readonly区别
2013/05/20 面试题
门卫岗位安全职责
2013/12/13 职场文书
大学生旷课检讨书
2014/01/22 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
作文评语集锦大全
2014/04/23 职场文书
身边的榜样活动方案
2014/08/20 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
创业计划书之酒吧
2019/12/02 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
什么是Python装饰器?如何定义和使用?
2022/04/11 Python