vue cli3

1:px2rem 使用方式
  npm i postcss-pxtorem --save-dev


  建立一個rem.js  src/assets  內容以下
// 基準大小
const baseSize = 32
    // 設置 rem 函數
function setRem() {
    // 當前頁面寬度相對於 750 寬的縮放比例，可根據本身須要修改。
    const scale = document.documentElement.clientWidth / 750
        // 設置頁面根節點字體大小
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
    // 改變窗口大小時從新設置 rem
window.onresize = function() {
    setRem()
}


在main.js 引入剛纔的腳本


項目根目錄新建一個vue.config.js 添加內容

module.exports = {

lintOnSave: true,

css: {

loaderOptions: {

postcss: {

plugins: [

require('postcss-pxtorem')({

rootValue: 32,

remUnit: 32,

propList: ['*'],

selectorBlackList: ['vux-']

})

]

}

}

}

}

　　

1；安裝vue cli3/ 建立項目

npm install -g @vue/cli
vue create my-project

2：根目錄新建 vue.config.js