vuecli4.3+vant移动端架构

1、vuecli创建项目

vue create vue-vant

2、引入vant

yarn add vant

3、按需引入vant组件

// 1 安装
yarn add babel-plugin-import -D
// 注意：安装完插件要重启项目，不然引入会没样式

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

4、页面按需引入

<template>
    <div class="home">
        <van-button type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
    </div>
</template>

<script>
import { Button } from 'vant'
export default {
    name: 'Home',
    components: {
        [Button.name]:Button  // 注意：一定要加[Button.name]，不然没效果
                VanButton: Button // 两种写法都可以
    }
}
</script>

5、全局按需引入

// 在src中创建vant文件夹，里面创建index.js文件，写入代码：
import Vue from 'vue'
import { Button } from "vant"
Vue.use(Button)

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

6、rem适配

// index.html写入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用于设置 rem 基准值
yarn add amfe-flexible

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

// postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem
// 注意：
// 1.只能转换单独的 .css|.less|.scss 之类的文件、.vue 文件中的 style 中的 px
// 2.不能转换行内样式中的 px
// 3.selectorBlackList: ['.ig']配置中的ig不转换
// 4.大写PX不转换
yarn add postcss-pxtorem -D

// 配置postcss-pxtorem
1、创建postcss.config.js文件
2、配置
module.exports = {
    plugins: {
        "postcss-pxtorem": {
            // 设计稿 375:37.5
            // 设计稿：750:75
            // Vant 是基于 375
            rootValue: 37.5,
            propList: ["*"]
        }
    }
}

7、Vant UI 框架 Rem 适配 750/640 分辨率设计稿

原因：因为vant rem适配是根据375设计稿来适配的，如果你的设计图是750的话，就会出现vant样式变小，出现不兼容的情况，比如设置rootValue：75

// 修改postcss.config.js文件
module.exports = ({ file }) => {
    let isVant = file && file.dirname && file.dirname.indexOf("vant") > -1
    let rootValue = isVant ? 37.5 : 75 // 判断条件 请自行调整
    return {
        plugins: {
            autoprefixer: {
                browsers: ['Android >= 4.0', 'iOS >= 8'],
            },
            "postcss-pxtorem": {
                rootValue: rootValue,
                propList: ["*"],
                selectorBlackList: ['.ig']
            }
        }
    }
}