脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue CLI3移动端适配

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

 更新时间：2020年04月27日 11:19:05   作者：Vam的金豆之路  
这篇文章主要介绍了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" 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移动端适配内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue/cli安装报错及解决问题的方法图文详解

    vue/cli安装报错及解决问题的方法图文详解

    这篇文章主要给大家介绍了关于vue/cli安装报错及解决问题的方法,如果在安装@vue/cli时遇到错误,大家可以尝试以下步骤解决,需要的朋友可以参考下
    2023-07-07
  • Vue父子组建的简单通信之控制开关Switch的实现

    Vue父子组建的简单通信之控制开关Switch的实现

    这篇文章主要介绍了Vue父子组建的简单通信之控制开关Switch的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决

    Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决

    这篇文章主要介绍了Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • Vue中使用js制作进度条式数据对比动画

    Vue中使用js制作进度条式数据对比动画

    这篇文章主要为大家详细介绍了Vue中使用js制作进度条式数据对比动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)

    vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)

    这篇文章主要介绍了vue3中如何使用ref和reactive定义和修改响应式数据,这里就是vue3中setup组合式api中如何定义响应式数据并且修改赋值全部内容，需要的朋友可以参考下
    2022-12-12
  • vue中路由router配置步骤详解

    vue中路由router配置步骤详解

    vue的主要思想是组件化开发,路由用来配置组件对应展示路径,本文给大家介绍vue中路由router配置步骤,创建路由文件——使用路由——配置路由出口,使路由配置内容展示在页面上,感兴趣的朋友跟随小编一起看看吧
    2023-12-12
  • vue3.0 上手体验

    vue3.0 上手体验

    vue3.0 beta 版本已经发布有一段时间了，今天这篇文章就带大家体验一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Vue结合路由配置递归实现菜单栏功能

    Vue结合路由配置递归实现菜单栏功能

    这篇文章主要介绍了Vue结合路由配置递归实现菜单栏,本文通过实例代码给大家介绍的非常详细，对大家的学习火锅工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • Vue+ElementUI技巧之自定义表单项label的文字提示方法

    Vue+ElementUI技巧之自定义表单项label的文字提示方法

    这篇文章主要给大家介绍了关于Vue+ElementUI技巧之自定义表单项label文字提示的相关资料,文中通过图文以及代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-02-02
  • vue弹窗组件使用方法

    vue弹窗组件使用方法

    弹窗是一个项目必备的复用利器，这篇文章主要介绍了vue弹窗组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-04-04

最新评论