vant组件库入门demo

简介

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

cdn使用

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

• 第一步：引入css和js

• 第二步：实例化Vant

	
	
	//html部分
	

	  

	    大号按钮
	  

• 注册组件引用

脚手架安装

在新项目中使用，推荐使用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
		}]
	  ]
	}

更多细节请点击