unplugin-vue-components插件引入组件

现在的UI组件库Element UI、Ant Design Vue、Vant UI引入组件方式为按需引入和完整引入俩种方式

完整引入：配置简单，打包文件大

按需引入：配置需要 babel-plugin-import 插件

unplugin-vue-components 插件既能像完整引入 那样配置和使用都简单，又能像按需引入那样减少构建文件的大小

下载插件：npm i unplugin-vue-components -D

vue-cli脚手架配置vue.config.js:

const { VantResolver } = require('unplugin-vue-components/resolvers')
const ComponentsPlugin = require('unplugin-vue-components/webpack')

configureWebpack: {
  plugins: [
    ComponentsPlugin({
      resolvers: [VantResolver()]
    })
  ]
}

vite脚手架配置vite.config.js:

import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers'

plugins: [
  Components({
    resolvers: [VantResolver()]
  })
],

备注

如果项目里使用了unplugin-vue-components插件，会影响webstorm的自动导入功能