Enseñarte paso a paso cómo utilizar los componentes Vant

Sitio web oficial de la biblioteca de componentes Vant: Vant 2: componentes de interfaz de usuario móvil creados en Vue

1. Instalación

1. Instalar a través de npm ( recomendado )

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

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

2. Instalar a través de CDN

(Para obtener más detalles, consulte el sitio web oficial y haga clic en el lado izquierdo para comenzar rápidamente. No se recomienda utilizar CDN gratuito en entornos de producción empresarial).

3. Instalación mediante andamio

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

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

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

 En la interfaz gráfica, haga clic en  依赖 ->  安装依赖y luego  vant agréguelo a las dependencias.

2. Introducir componentes y utilizar componentes.

Método 1. Introducir componentes automáticamente según demanda ( recomendado )

(1) Instalar el complemento

npm i babel-plugin-import -D

(2) La configuración en babel.config.js es la siguiente

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

(3) La configuración en main.js es la siguiente

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

(4) Utilice componentes directamente en la página vue

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

Método 2. Introducir componentes manualmente según demanda

(1) Introduzca componentes y estilos en la página vue

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

(2) Registre el componente en la página vue (registre f2 y seleccione 1)

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

(3) Utilice componentes en la página vue

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

Método 3. Importar todos los componentes

Vant admite la importación de todos los componentes a la vez. La importación de todos los componentes aumentará el tamaño del paquete de código, por lo que no se recomienda este método .

(1) Escriba lo siguiente en main.js

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

(2) Utilice el componente en cualquier página que necesite utilizar el componente vant

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

Consejos: Después de configurar la importación bajo demanda, no se permitirá importar directamente todos los componentes.