vue3+vant 移動端應用（1）

安裝Vant

1. npm i vant -S 主要問題如何按需引用、REM適配
2. 按需引入

babel-plugin-import 會在編譯過程當中將 import 的寫法自動轉換爲按需引入的方式
//安裝命令
npm i babel-plugin-import -D
複製代碼

3. 安裝以後新創建babel.config.js文件

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

複製代碼

4.這樣就能夠直接使用了,在main.js文件夾引入

import Vue from 'vue'
import { Button } from 'vant';
Vue.use(Button);
複製代碼

rem適配

1. 安裝兩個插件

npm i postcss-pxtorem -S
npm i amfe-flexible -S
複製代碼

2. 根據vue3提供的新配置方法，在vue-config.js中對CSS作配置：

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

複製代碼

3. rootValue  75.0的值其實就是表明ui設計稿的750px的像素，引用的時候css直接寫寬750px就至關於100％，它會自動根據屏幕進行計算成rem，無需對原測量值進行REM的換算（這裏推薦37.5，結合2x的設計圖開發，由於vant的組件你會發現37.5更爲適合）。
4. 在main.js文件夾下引入

import 'amfe-flexible';
複製代碼

這樣就能夠在html下對於font-size進行計算。達到自適應的，直接安照UI設計稿750px寫像素單位，開發更加高效。