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, //換算基數(shù)， 默認100 ，這樣的話把根標簽的字體規(guī)定為1rem為50px,這樣就可以從設計稿上量出多少個px直接在代碼中寫多上px了。
// unitPrecision: 5, //允許REM單位增長到的十進制數(shù)字。
//propWhiteList: [], //默認值是一個空數(shù)組，這意味著禁用白名單并啟用所有屬性。
// propBlackList: [], //黑名單
exclude: /(node_module)/, //默認false，可以（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)\/如果想把前端UI框架內的px也轉換成rem，請把此屬性設為默認值
// selectorBlackList: [], //要忽略并保留為px的選擇器
// ignoreIdentifier: false, //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設置為true。
// replace: true, // （布爾值）替換包含REM的規(guī)則，而不是添加回退。
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移動端適配內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于vue/cli安裝報錯及解決問題的方法,如果在安裝@vue/cli時遇到錯誤,大家可以嘗試以下步驟解決,需要的朋友可以參考下2023-07-07
Vue父子組建的簡單通信之控制開關Switch的實現(xiàn)
這篇文章主要介紹了Vue父子組建的簡單通信之控制開關Switch的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決
這篇文章主要介紹了Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細介紹了Vue中使用js制作進度條式數(shù)據(jù)對比動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue3中如何使用ref和reactive定義和修改響應式數(shù)據(jù)(最新推薦)
這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應式數(shù)據(jù)并且修改賦值全部內容，需要的朋友可以參考下2022-12-12
vue的主要思想是組件化開發(fā),路由用來配置組件對應展示路徑,本文給大家介紹vue中路由router配置步驟,創(chuàng)建路由文件——使用路由——配置路由出口,使路由配置內容展示在頁面上,感興趣的朋友跟隨小編一起看看吧2023-12-12
vue3.0 beta 版本已經發(fā)布有一段時間了，今天這篇文章就帶大家體驗一下，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了Vue結合路由配置遞歸實現(xiàn)菜單欄,本文通過實例代碼給大家介紹的非常詳細，對大家的學習火鍋工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
Vue+ElementUI技巧之自定義表單項label的文字提示方法
這篇文章主要給大家介紹了關于Vue+ElementUI技巧之自定義表單項label文字提示的相關資料,文中通過圖文以及代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
彈窗是一個項目必備的復用利器，這篇文章主要介紹了vue彈窗組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04