Teach you step by step how to use Vant components

Vant component library official website: Vant 2 - Mobile UI Components built on Vue

1. Installation

1. Install via npm ( recommended )

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

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

2. Install via CDN

(For details, please see the official website and click on the left side to get started quickly. It is not recommended to use free CDN in enterprise production environments.)

3. Installation via scaffolding

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

# 创建一个项目
vue create 项目名称

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

 In the graphical interface, click  依赖 ->  安装依赖and then  vant add it to the dependencies.

2. Introduce components and use components

Method 1. Automatically introduce components on demand ( recommended )

(1) Install plug-in

npm i babel-plugin-import -D

(2) The configuration in babel.config.js is as follows

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

(3) The configuration in main.js is as follows

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

(4) Use components directly on the vue page

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

Method 2. Manually introduce components on demand

(1) Introduce components and styles into the vue page

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

(2) Register the component on the vue page (register f2 and select 1)

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

(3) Use components on the vue page

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

Method 3. Import all components

Vant supports importing all components at once. Importing all components will increase the size of the code package, so this approach is not recommended .

(1) Write the following in main.js

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

(2) Use the component on any page that needs to use the vant component

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

Tips: After configuring on-demand import, all components will not be allowed to be imported directly.