1.vant Installation

npm install

Use in existing projects vant when , Can pass npm or yarn Installation .vue2 and vue3 The installation method is basically the same

npm i vant -S #  Install the latest version 

npm i [email protected] -S # vue2 project , install vant2
 Copy code 

Through scaffolding UI install

If you pass vue Official scaffolding Vue Cli If you create a project

It can be installed in the following positions

Import components

There are three ways of introduction, namely

• Auto on demand import
• Manual on-demand import
• Introduce all

1. Automatically bring in components on demand

The official recommendation

A plug-in needs to be installed ：

babel-plugin-import  Is a babel plug-in unit , It will... During compilation import The way of writing is automatically converted to the way of introducing on demand . Can pass npm Mode of installation ：npm i babel-plugin-import -D Use babel7 Can be in babel.config.js Middle configuration

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

stay main.js Introduce the desired components in .（ Use button Make an introduction ）

import { Button } from 'vant' //  introduce Button Components 
Vue.use(Button) //  Global registration 
 Copy code 

（ If you don't understand, you can look at the picture ）

So you can use... In components or pages button Component

2. Manually bring in components on demand

Without plug-ins , You can manually import the required components , Also use button give an example

stay main.js Introduction in

import Button from 'vant/lib/button'; 
import 'vant/lib/button/style';
Vue.use(Button) //  Global registration button
 Copy code 

3. Import all components

Vant All components can be imported at one time , Introducing all the components increases the size of the code package , So it's not recommended .

Also in main.js Introduction in

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

Be careful ： After configuring on-demand import , Direct import of all components is not allowed .

take babel.config.js Code comments in

2 vant Simple use

stay vant Of Official documents The usage of various components is described in detail in .

button Button

Button support  default、primary、info、warning、danger  Five types , The default is  default.

<van-button type="primary"> Main buttons </van-button> 
<van-button type="info"> Information buttons </van-button> 
<van-button type="default"> Default button </van-button> 
<van-button type="warning"> Warning button </van-button> 
<van-button type="danger"> Danger button </van-button>
 Copy code 

Simple button

adopt plain Property to set the button to a plain button

<van-button plain type="primary"> Simple button </van-button>
<van-button plain type="info"> Simple button </van-button>
 Copy code 

In addition to these styles, there are many other functions

Webpage navigation

Can pass  url  Attributes in URL Jump , Or through  to  Property to perform route jump .

<van-button type="primary" url="/vant/mobile.html">URL  Jump </van-button> 
<van-button type="primary" to="index"> Routing jump </van-button>
 Copy code 

The details of the props Events Slots And style variables （less) It can be in the corresponding component file Find below

summary

• vant install
• vant Easy to use

This article briefly introduces vant stay vue2 Simple installation and simple use . More ways to use components can be found in vant official file View in