current position:Home>Vue2 simple use of vant (based on Vue CLI)

Vue2 simple use of vant (based on Vue CLI)

2022-04-29 16:33:55chy

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 )

image.png 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'; 
 Copy code 

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

image.png take babel.config.js Code comments in image.png

2 vant Simple use

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

button Button

Button support  defaultprimaryinfowarningdanger  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


  • 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

copyright notice
author[chy],Please bring the original link to reprint, thank you.

Random recommended