vue2使用vant组件库；使用rem后vant组件样式变小了。

vue2使用vant组件库

---

---

一、vant是什么？

vant2官网地址

二、使用步骤

Vue 2 项目，安装 Vant 2：

1.引入vant2库

npm i vant@latest-v2

2.引入 自动按需引入组件

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

npm i babel-plugin-import -D

在 babel.config.js 中添加配置
注意：webpack 1 无需设置 libraryDirectory

// 在 babel.config.js 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 在下面加入此代码
  plugins: [
    [
      'import',
      {
        "libraryName": 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
}

3.在main.js中按需引入组件（推荐）

需要注意： 配置按需引入后，将不允许直接导入所有组件（4.就是直接导入所有组件的（不推荐4））。

// 引入移动端vant组件库
import 'vant/lib/index.css';
import {
  PullRefresh,
  IndexBar,
  IndexAnchor,
  Image as VanImage,
  Calendar,
  Stepper,
  Dialog,
  Tag,
  Sticky,
  TreeSelect,
  Area,
  DatetimePicker,
  Form,
  Search,
  Button,
  Picker,
  Field,
  Popup,
  Checkbox,
  CheckboxGroup,
  RadioGroup,
  Radio,
  Switch,
  SwitchCell,
  Toast,
  Lazyload,
  List,
  NavBar,
  Tabbar,
  TabbarItem,
  SubmitBar,
  Icon,
  Cell,
  CellGroup,
  Step,
  Steps,
  Divider,
  Tab,
  Tabs,
  ImagePreview,
  Swipe,
  SwipeItem,
  Progress,
  ActionSheet
} from 'vant';
Vue.use(PullRefresh).use(IndexBar).use(IndexAnchor).use(VanImage).use(Calendar).use(Stepper).use(Dialog).use(Tag).use(Sticky).use(TreeSelect).use(Area).use(DatetimePicker).use(Form).use(Button).use(Picker).use(Field).use(Popup).use(Checkbox).use(CheckboxGroup).use(RadioGroup).use(Radio).use(Switch).use(SwitchCell).use(Toast).use(Lazyload, {
  preload: 8
}).use(List).use(NavBar).use(Tabbar).use(TabbarItem).use(SubmitBar).use(Icon).use(Cell).use(CellGroup).use(Step).use(Steps).use(Divider).use(Tab).use(Tabs).use(ImagePreview).use(Swipe).use(SwipeItem).use(Search).use(Progress).use(ActionSheet);

4.或者只是在某个index.vue内使用（推荐）

import Vue from "vue"
import { Col, Row, Toast } from 'vant'
import 'vant/lib/index.css'
Vue.use(Col)
Vue.use(Row)
Vue.use(Toast)

5.在main.js中导入所以组件（不推荐）

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

注意： 配置按需引入后，将不允许直接导入所有组件。

6.使用案例：

下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成。

<template>
  <div>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <p>刷新次数: {{ count }}</p>
    </van-pull-refresh>

  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      count: 0,
      isLoading: false,
    }
  },
  methods: {
    onRefresh () {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    },
  },
}
</script>

<style lang="less" scoped>
</style>

7.针对Toast is not defined at eval

将Toast在使用的vue页面单独引入一下使用即可

import { Toast } from 'vant'

三、针对H5使用rem后导致vant样式变小：

原因：因为两者使用的单位不一样，vant等使用的是 px 单位，我们项目中使用的是 rem

1.官方解决办法在这里，但是我配置了无效。

2.我的解决办法：

直接给index.html设置的head，添加一个meta，起作用的代码是： content 里面的内容.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

---

总结

以上就是在vue2项目中，使用vant组件库的引入方法。