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 相关文章推荐
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
vue中nextTick用法实例
Sep 11 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之第六天
2006/10/09 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
python实现一次创建多级目录的方法
2015/05/15 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
深入理解Python 多线程
2020/06/16 Python
python对一个数向上取整的实例方法
2020/06/18 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
小学英语教学反思案例
2014/02/04 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
教师个人自我评价
2015/03/04 职场文书
读书笔记怎么写
2015/07/01 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
python Django框架快速入门教程(后台管理)
2021/07/21 Python