1. 程式人生 > 實用技巧 >vue cli3 + vant 專案 rem配置流程

vue cli3 + vant 專案 rem配置流程

1、安裝lib-flexible(用於設定 rem 基準值)

npm i -S amfe-flexible

2、在main.js檔案中引入lib-flexible

import 'amfe-flexible'

3、安裝postcss-pxtorem(postcss-pxtorem是一款 postcss 外掛,用於將單位轉化為 rem)

npm install postcss-pxtorem --save-dev

4、在public/index.html加入meta標籤

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

5、動態設定rootValue的大小,即對於vant-ui框架的元件 將rootValue設定成37.5,對於我們自己的750寬度的設計稿的將rootValue設定成75。這樣就可以達到所有的均可自適應了。在根目錄postcss.config.js檔案中新增入下內容:

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = ({ file }) => {
    let remUnit
    if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
        remUnit 
= 37.5 } else { remUnit = 75 } return { plugins: [ autoprefixer(), pxtorem({ rootValue: remUnit, propList: ['*'], selectorBlackList: ['van-circle__layer'] }) ] } }