安裝插件

yarn add lib-flexible-computer -S // 根節(jié)點會根據(jù)頁面視口變化而變化font-size大小，行內(nèi)樣式不兼容
lib-flexible 只是針對屏幕540以下的，然后還要到flexible.js文件下面手動修改，字體大小也不會變。略顯麻煩
yarn add px2rem-loader -D // 自動將px轉換為rem (-D 只是裝在本地開發(fā)環(huán)境)
yarn add postcss-px2rem // 將代碼中px自動轉化成對應的rem的一個插件

引入插件

在main.js文件中引入

import 'lib-flexible-computer' 

修改vue.config.js

在根目錄下新建 vue.config.js（或者css下加入）

  css: {
   loaderOptions: {
    css: {},
    postcss: {
     plugins: [
      require('postcss-px2rem')({
       remUnit: 192 // 設計圖寬度/10
      })
     ]
    }
   }
  }

image.png

vue cli3中 這個文件都是可選項，默認沒有。

vue cli3的特點
1.移除了配置文件目錄，config 和 build 文件夾
2.移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動到 public 中
3.在 src 文件夾中新增了 views 文件夾，用于分類視圖組件和公共組件