vant组件库入门demo

简介

Vant 是有赞前端团队开源的移动端vue组件库，适用于手机端h5页面。

cdn使用

已有项目中使用，Vant提供了简单的cdn引入的使用方式。

• 第一步：引入css和js

	<!-- 引入样式文件 -->
	<link
	  rel="stylesheet"
	  href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"
	/>

	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>

• 第二步：实例化Vant

	<script>
	  // 在 #app 标签下渲染一个按钮组件
	  const app = Vue.createApp({
		
	  });
	  app.use(vant);
	  //挂载
	  app.mount('#app');
	</script>
	
	//html部分
	

	  <div id="app">
	    <van-button type="primary" size="large">大号按钮</van-button>
	  </div>

• 注册组件引用

	<script>
	  // 调用函数组件，弹出一个 Toast
	  vant.Toast('提示');
	
	  // 通过 CDN 引入时不会自动注册 Lazyload 组件
	  // 可以通过下面的方式手动注册
	  app.use(vant.Lazyload);
	</script>

脚手架安装

在新项目中使用，推荐使用vue-cli 创建项目安装Vant.

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面
vue ui
点击 依赖 -> 安装依赖，然后将 vant 添加到依赖中即可

引入组件

手动引入组件

	import Button from 'vant/lib/button';
	import 'vant/lib/button/style';

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

	import { createApp } from 'vue';
	import Vant from 'vant';
	import 'vant/lib/index.css';

	const app = createApp();
	app.use(Vant);

使用 babel 插件 babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式.

	# 安装 babel-plugin-import 插件
	npm i babel-plugin-import -D

.babelrc配置

	// 在 .babelrc 或 babel-loader 中添加插件配置
	// 注意：webpack 1 无需设置 libraryDirectory
	{
	  "plugins": [
		["import", {
		  "libraryName": "vant",
		  "libraryDirectory": "es",
		  "style": true
		}]
	  ]
	}

更多细节请点击