vue+vant 移动端项目（安装vant+rem适配）

#适配 
//lib-flexible修改根字体大小
//autoprefixer可以自动在样式中添加浏览器厂商前缀，避免手动处理样式兼容问题
npm install postcss-plugin-px2rem [email protected]
npm i lib-flexible --save

//npm i [email protected]  //解决版本过高的问题

#public-index.html
//注释掉

#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,
        // 设置代理
        proxy: {
            "/api": {
                target: "http://192.168.xxx.xxx", // 域名
                ws: true, // 是否启用websockets
                changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                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使用模板