vue.vant组件库，懒加载

---

文章目录

• 系列文章目录
• 前言
• 一、下载安装vant组件库
• 二、两种导入方式:
• 三，懒加载插件

---

前言

如何使用vant以及懒加载

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、下载安装vant组件库

终端指令    cnpm i vant@latest-v2 --save

二、两种导入方式:

1.导入所有组件:  在main.js中添加如下代码即可

   import Vant from 'vant';
    import 'vant/lib/index.css';
    Vue.use(Vant);

 然后在组件中直接复制官方文档中的组件代码即可显示

    <van-icon name="chat-o"  badge="9" color="#1989fa" size="40"/>

2.按需导入组件(推荐)

2.1首先安装插件 :   cnpm i babel-plugin-import --save

2.2    在根目录的babel.config.js文件中添加plugins字段

	module.exports = {
  		presets: [
    			'@vue/cli-plugin-babel/preset'
  		],
  		plugins: [
    			['import', {
      				libraryName: 'vant',
      				libraryDirectory: 'es',
      				style: true
    			}, 'vant']
  		]
	}

2.3    在mian.js中按需导入需要用到的组件

	import { Button, Icon } from 'vant';
	Vue.use(Button);
	Vue.use(Icon);

    最后, 在组件中直接复制官方文档中的组件代码即可显示

	<van-icon name="chat-o"  badge="9" color="#1989fa" size="40"/>

  <!-- vue全家桶技术 axios、UI组件库、vue路由、vuex、vue等 -->

三，懒加载插件

1, 安装图片懒加载模块

终端指令：    npm install vue-lazyload@1.3 --save

2, 在main.js入口文件中引入图片懒加载模块

	import VueLazyLoad from 'vue-lazyload'
	Vue.use(VueLazyLoad,{
  		loading: require("@/assets/logo.png")
	})

3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可

	<img v-lazy="roomData.room_src" alt="">