當我建好VUE-CLI3的腳手架之後，我們來接著選擇一個合適的UI框架來進行實戰開發，還不會搭建？---> 點選

https://youzan.github.io/vant/#/zh-CN/quickstart    這個的英文VANT的開發文件，感覺在移動端算是功能還算不錯的一個UI框架，功能性的東西挺多的，而且也支援國際化。

一般情況下如果全部應用CDN或者直接全域性使用，直接根據文件就行，我這裡重點講一下這個UI的框架按需引入以及REM適配（官網也有提到，只不過有點模糊，新手入門要研究一會，我只是闡述重點，以提高效率），下面開始：

第一步不用說照著官網進行安裝，NPM或者是yarn，都是可以的

npm i vant -S

or

yarn and vant

安裝之後

我們在babel.config.js中進行配置外掛：

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

這樣就可以直接使用了，我這裡在main.js中做下示範：

LS（按鈕和彈窗元件）：

import Vue from 'vue'
import { Button,Popup } from 'vant';
Vue.use(Button).use(Popup);
 

結構中：

<van-popup v-model="show" position="top" :overlay="true">
<van-button disabled type="primary">禁用狀態</van-button>

其實看到這，沒什麼難度，主要注意外掛的配置的位置寫法就行了，但是這個ui庫的單位都是以px為單位的，在移動端適配都有點麻煩了，既然是移動端肯定有解決方案的嘛，按照官方的說法需要我們去在裝兩個外掛（PS：這兩個外掛平時都可以用，能直接把PX轉成對應的REM佈局，也挺方便的）：

npm i postcss-pxtorem -S
npm i amfe-flexible -S
 

然後繼續，根據VUE-CLI3提供的新配置方法，在VUE-config.js中對CSS做配置：

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css:{
      // modules:false,
      // extract:true,
      sourceMap:false,
      loaderOptions: {
        postcss: {
          plugins: [
            autoprefixer(),
            pxtorem({
              rootValue: 75.0,
              propList: ['*']
            })
          ]
        }
      }
    }
}

這段配置就算是css的預載入配置，rootValue  75.0的值其實就是代表ui設計稿的750px的畫素，引用的時候css直接寫寬750px就相當於100％，它會自動根據螢幕進行計算成rem，無需對原測量值進行REM的換算。

只配置這一個還不夠，只做到這一步是沒法自適應的，因為它本身沒有對html的font-size進行計算，基本不會變化，我們找到入口檔案main.js，引入以下程式碼即可：

import 'amfe-flexible';

這樣就能實現該UI框架的REM自適應了，而且全域性也不用去配置REM的佈局，直接安照UI設計稿750px寫畫素單位。開發更加高效。