#適配 
//lib-flexible修改根字體大小
//autoprefixer可以自動在樣式中添加瀏覽器廠商前綴，避免手動處理樣式兼容問題
npm install postcss-plugin-px2rem autoprefixer@8.0.0
npm i lib-flexible --save

//npm i autoprefixer@8.0.0  //解決版本過高的問題

#public-index.html
<meta name="viewport" content="width=device-width,initial-scale=1.0">//注釋掉

#main.js
import 'lib-flexible/flexible.js'


新建postcss.config.js
const AutoPrefixer = require('autoprefixer')
const pxtorem = require('postcss-plugin-px2rem')
module.exports = ({ file }) => {
    let remUnit
    if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
        remUnit = 37.5
    } else {
        remUnit = 75
    }
    return {
        plugins: [
            AutoPrefixer({
                browsers: ['last 20 versions', 'android >= 4.0']
            }),
            pxtorem({
                rootValue: remUnit,
                propList: ['*'],
                selectorBlackList: ['van-circle__layer']
            })
        ]
    }
}

#新建vue.config.js
module.exports = {
    devServer: {
        disableHostCheck: true,
        // 設(shè)置代理
        proxy: {
            "/api": {
                target: "http://192.168.xxx.xxx", // 域名
                ws: true, // 是否啟用websockets
                changeOrigin: true, //開啟代理：在本地會創(chuàng)建一個虛擬服務(wù)端猾编，然后發(fā)送請求的數(shù)據(jù)窃诉，并同時接收請求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進行數(shù)據(jù)的交互就不會有跨域問題
                pathRewrite: {
                    "^/api": "/"
                }   
            }
        }
    },
    lintOnSave: true
}


#https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
npm i vant -S

# 安裝插件
npm i babel-plugin-import -D

//新建 .babelrc   配置按需引入
{
    "plugins": [
        [
            "import",
            {
                "libraryName": "vant",
                "libraryDirectory": "es",
                "style": true
            }
        ]
    ]
}



#vant使用模板
<template>
  <div>
    <van-button type="default">默認按鈕</van-button>
    <van-button type="primary">主要按鈕</van-button>
  </div>
</template>

<script>
import { Button } from "vant";

export default {
  name: "Home",
  components:{
    [Button.name]:Button
  }
};
</script>