快捷導(dǎo)航

Vue CLI3移動端適配(px2rem或postcss-plugin-px2rem)

更新時間：2020年04月27日 11:19:05 作者：Vam的金豆之路

這篇文章主要介紹了Vue CLI3移動端適配(px2rem或postcss-plugin-px2rem),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

今天，我們使用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預(yù)處理語言樣式適配

1、安裝 postcss-plugin-px2rem （ 適用于css預(yù)處理語言 ）

npm i postcss-plugin-px2rem -D

2、在 vue.config.js 配置

module.exports={
	 css: {
  loaderOptions: {
  postcss: {
   plugins: [
    require('postcss-plugin-px2rem')({
     rootValue: 75, //換算基數(shù)， 默認(rèn)100 ，這樣的話把根標(biāo)簽的字體規(guī)定為1rem為50px,這樣就可以從設(shè)計稿上量出多少個px直接在代碼中寫多上px了。
     // unitPrecision: 5, //允許REM單位增長到的十進(jìn)制數(shù)字。
     //propWhiteList: [], //默認(rèn)值是一個空數(shù)組，這意味著禁用白名單并啟用所有屬性。
     // propBlackList: [], //黑名單
     exclude: /(node_module)/, //默認(rèn)false，可以（reg）利用正則表達(dá)式排除某些文件夾的方法，例如/(node_module)\/如果想把前端UI框架內(nèi)的px也轉(zhuǎn)換成rem，請把此屬性設(shè)為默認(rèn)值
     // selectorBlackList: [], //要忽略并保留為px的選擇器
     // ignoreIdentifier: false, //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設(shè)置為true。
     // replace: true, // （布爾值）替換包含REM的規(guī)則，而不是添加回退。
     mediaQuery: false, //（布爾值）允許在媒體查詢中轉(zhuǎn)換px。
     minPixelValue: 3 //設(shè)置要替換的最小像素值(3px會被轉(zhuǎn)rem)。 默認(rèn) 0
    }),
   ]
  }
 }
 }
}

3、在 package.json 配置，加入 postcss 相關(guān)插件

{
 "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": {}
 }
 }
}

結(jié)語

到此這篇關(guān)于Vue CLI3移動端適配(px2rem或postcss-plugin-px2rem)的文章就介紹到這了,更多相關(guān)Vue CLI3移動端適配內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: