1、vuecli創(chuàng)建項(xiàng)目

vue create vue-vant

2、引入vant

yarn add vant

3、按需引入vant組件

// 1 安裝
yarn add babel-plugin-import -D
// 注意：安裝完插件要重啟項(xiàng)目，不然引入會(huì)沒(méi)樣式

// 2 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

4、頁(yè)面按需引入

<template>
    <div class="home">
        <van-button type="default">默認(rèn)按鈕</van-button>
        <van-button type="primary">主要按鈕</van-button>
        <van-button type="info">信息按鈕</van-button>
        <van-button type="warning">警告按鈕</van-button>
        <van-button type="danger">危險(xiǎn)按鈕</van-button>
    </div>
</template>

<script>
import { Button } from 'vant'
export default {
    name: 'Home',
    components: {
        [Button.name]:Button  // 注意：一定要加[Button.name]，不然沒(méi)效果
                VanButton: Button // 兩種寫(xiě)法都可以
    }
}
</script>

5、全局按需引入

// 在src中創(chuàng)建vant文件夾，里面創(chuàng)建index.js文件，寫(xiě)入代碼：
import Vue from 'vue'
import { Button } from "vant"
Vue.use(Button)

// 在main.js里面引入
import '@/vant/index'

6、rem適配

// index.html寫(xiě)入viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

// amfe-flexible用于設(shè)置 rem 基準(zhǔn)值
yarn add amfe-flexible

// main.js引入amfe-flexible
import 'amfe-flexible'

// postcss-pxtorem是一款 postcss 插件，用于將單位轉(zhuǎn)化為 rem
// 注意：
// 1.只能轉(zhuǎn)換單獨(dú)的 .css|.less|.scss 之類(lèi)的文件、.vue 文件中的 style 中的 px
// 2.不能轉(zhuǎn)換行內(nèi)樣式中的 px
// 3.selectorBlackList: ['.ig']配置中的ig不轉(zhuǎn)換
// 4.大寫(xiě)PX不轉(zhuǎn)換
yarn add postcss-pxtorem -D

// 配置postcss-pxtorem
1、創(chuàng)建postcss.config.js文件
2、配置
module.exports = {
    plugins: {
        "postcss-pxtorem": {
            // 設(shè)計(jì)稿 375:37.5
            // 設(shè)計(jì)稿：750:75
            // Vant 是基于 375
            rootValue: 37.5,
            propList: ["*"]
        }
    }
}

7、Vant UI 框架 Rem 適配 750/640 分辨率設(shè)計(jì)稿

原因：因?yàn)関ant rem適配是根據(jù)375設(shè)計(jì)稿來(lái)適配的，如果你的設(shè)計(jì)圖是750的話(huà)，就會(huì)出現(xiàn)vant樣式變小，出現(xiàn)不兼容的情況，比如設(shè)置rootValue：75

// 修改postcss.config.js文件
module.exports = ({ file }) => {
    let isVant = file && file.dirname && file.dirname.indexOf("vant") > -1
    let rootValue = isVant ? 37.5 : 75 // 判斷條件 請(qǐng)自行調(diào)整
    return {
        plugins: {
            autoprefixer: {
                browsers: ['Android >= 4.0', 'iOS >= 8'],
            },
            "postcss-pxtorem": {
                rootValue: rootValue,
                propList: ["*"],
                selectorBlackList: ['.ig']
            }
        }
    }
}