vant ui 在项目中的使用

项目中使用vant UI 步棸

1. 安装vant ui

通过 npm 安装
在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

Vue 3 项目，安装最新版 Vant：

npm i vant -S

Vue 2 项目，安装 Vant 2：

npm i vant@latest-v2 -S
或者 yarn add vant@latest-v2

2. 引入组件

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

 安装插件
npm i babel-plugin-import -D
或者yarn add babel-plugin-import -D

在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

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

在不使用插件的情况下，可以手动引入需要的组件。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

方式三. 导入所有组件(不推荐,因为在APP端使用时注重用户体验,全部引入会导致加载缓慢,用户体验不好)

Vant 一次性导入所有组件 在main.js下配置

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

Vue.use(Vant);