vant UI 使用，按需引入

vant-uI官方文档

1.安装

npm i vite-plugin-style-import@1.4.1 -D          //npm安装
yarn add vite-plugin-style-import@1.4.1 -D       //yarn 安装

2. 配置插件

//在 vite.config.js 文件中配置插件：
import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';
 
export default {
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
};

或

在非 vite 项目中

//babel.config.js 文件中配置如下代码：
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

3.引入

        全局引入

main.js:import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(Vant)

        按需引入

项目中可能用到多个vant组件，因此单独创建vant.js文件，在src下plugin（文件夹）中创建，代码如下：

import Vue from 'vue'
//可引入多个需要组件，此处只引入Button做例，有多个写在...处
import {
    Button,...
} from 'vant'
 
export default function vant(){
    //此处只use Button做例，有多个写在...处
    Vue.use(Button);
    ...
}

在main.js中，配置如下：

import Vant from '@/common/vant'
Vant()
 

        按需引入还可以（推荐）：

//安装
npm i babel-plugin-import -D(简写)
npm install babel-plugin-import --save-dev(完整写法)

然后，在.babelrc文件中

"plugins": [
     "transform-vue-jsx", 
     "transform-runtime",
     <!--这个是添加的-->
     ["import",{"libraryName":"vant","style":true}]
 ]

最后，在main.js中

import {Button} from 'vant'
Vue.use(Button)
// 引入的多的话
import { Button, Row, Col } from 'vant'
Vue.use(Button).use(Row).use(Col)

4.自定义样式类来覆盖默认样式

<template>
  <van-button class="my-button">按钮</van-button>
</template>
 
<style>
  /** 覆盖 Button 最外层元素的样式 */
  .my-button {
    width: 200px;
  }
 
  /** 覆盖 Button 内部子元素的样式 */
  .my-button .van-button__text {
    color: red;
  }
</style>

5.使用

        请看官方文档