手把手教你如何使用Vant组件

Vant组件库官网：Vant 2 - Mobile UI Components built on Vue

一.安装

1.通过 npm 安装（推荐使用）

# Vue 3 项目，安装最新版 Vant：
npm i vant -S
 
# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

2.通过 CDN 安装

（详见官网点击左侧快速上手，不推荐在企业生产环境中使用免费 CDN。）

3.通过脚手架安装

# 安装 Vue Cli
npm install -g @vue/cli
 
# 创建一个项目
vue create 项目名称
 
# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

二.引入组件和使用组件

方式一. 自动按需引入组件 (推荐使用)

(1)安装插件

npm i babel-plugin-import -D

(2)babel.config.js 中配置如下

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

（3）main.js中配置如下

import Vue from 'vue';
import { Button } from 'vant';//引入需要用到的组件
Vue.use(Button);//use组件

（4）在vue页面直接使用组件

<van-button type="primary">主要按钮</van-button>

方式二. 手动按需引入组件

（1）在vue页面引入组件及样式

import Button from "vant/lib/button";//引入组件
import "vant/lib/button/style";//引入样式
 

（2）在vue页面注册组件（注册f2选1）

components: {
    VanButton:Button//注册组件
    [Button.name]: Button,//注册组件
  },
//二选一

（3）在vue页面使用组件

 <!-- 使用组件 -->
 <van-button type="primary">主要按钮</van-button>

方式三.导入所有组件

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

（1）在main.js中写入如下

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

（2）在任一需要使用vant组件的页面使用组件

<van-button type="primary">主要按钮</van-button>

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