vue3——vant按需引入

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

vant是一个常用的移动端组件库，主要在vue项目中使用，本篇文章介绍下在vue3项目中引入vant组件库的几种方式。

vant安装

npm install vant

在项目终端中直接通过npm进行安装vant即可。

vant引用

在vue项目中vant组件有多种注册及引用方式，每种方式都有其优缺点，下面我们分别来介绍：

1. APP全局注册

在vue项目中的main.js文件中，全局注册组件，如下：

 // main.js文件
import { createApp } from 'vue'
import App from './App.vue'
import { Button, Cell } from 'vant';
import 'vant/lib/index.css';

createApp(App).use(Button).use(Cell).mount('#app')

如上述代码，通过app全局注册需要使用的vant组件并引入其样式即可。这种引入方式在页面上需要使用的时候可以直接使用，但全局注册会导致我打开一个页面的时候，可能这个页面只使用了一个Button组件或没有使用vant相关的组件，但还是会加载vant资源，这种就不太友好。

2. 局部注册

局部注册就是在某个需要使用vant的组件中进行注册，如下：

import { IndexBar, IndexAnchor } from 'vant'; 
export default {
  components: {
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor
  },
}

这样，就可以在组件中仅注册需要使用的vant组件即可。

3. vue3 setup中使用

在vue3项目框架中，在<script setup>中可以直接进行vant的使用，无需在进行注册，如下：

<template>
    <Button>按钮</Button>
</template>

<script setup>
import { Button } from 'vant'
</script>

但我们这样使用时，发现vant的按钮样式并没有加载进来，如下：

当然我们可以将vant的样式直接import引入进来，但这样并不智能，并且会引入所有的样式，而我们可能只需要button一个组件的样式。我们可以通过配置babel来进行按需引入。

首先安装babel-plugin-import插件，然后在项目的babel.config.js文件中进行配置，如下：

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

配置之后，重新启动项目，样式正常：

综上，第三种引入方式是比较合理并且简便的，因此，在vue3项目框架中，我们可以采用第三种方式来进行vant组件的引用。