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 = falsethis.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组件库的引入方法。