vant引入及配置

1. vant 官网

https://youzan.github.io/vant/#/zh-CN/quickstart

2. 通 npm 安装

npm i vant -S

3.安装 babel-plugin-import 插件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D

4.在 babel.config.js 中配置

plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

5.接着你可以在代码中直接引入 Vant 组件

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

<script>
import { Button } from 'vant';
export default {
    name:"Myindex",
    components: {
        [Button.name]: Button
    },
    data() {
        return {

        }
    }
}
</script>

<style scoped>
    .con{
        text-align: center;
    }
    button{
        display: block;
        margin: 0 auto;
    }
</style>

或者不在单个页面引用，在main.js全局引入

import Vue from 'vue'
import 'lib-flexible'
import App from './App.vue'

import {
  Cell,
  CellGroup,
  Icon,
  NavBar,
  Search,
  List,
  Toast,
  Button,
  Tab, Tabs,
  Col,
  Row,
  Calendar,
  Dialog,
  DropdownMenu, DropdownItem
} from 'vant';

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Search);
Vue.use(List);
Vue.use(Toast);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Col);
Vue.use(Row);
Vue.use(Calendar);
Vue.use(Dialog);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

6.rem 适配

   Vant 中的样式默认使用px作为单位，
   postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。
   lib-flexible  用于设置rem基准值   

（1） 安装postcss-pxtorem

npm install postcss-pxtorem --save-dev    

（2）安装lib-flexible

npm install --save lib-flexible

（3）在main.js中引入lib-flexible

import  'lib-flexible';

（4）在postcss.config.js文件中进行配置

实际上，我完全找不到这个文件，新建一个（很香）

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

7.底部安全区适配

iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了safe-area-inset-bottom属性，设置该属性后，即可在对应的机型上开启适配，如下示例：

<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

................................................

<!-- 开启 safe-area-inset-bottom 属性 -->
<van-number-keyboard safe-area-inset-bottom />

 <!--例 -->
<template>
  <van-tabbar :safe-area-inset-bottom="true">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="orders-o">文章</van-tabbar-item>
  </van-tabbar>
</template>