unplugin-vue-components

相关信息

💡 该插件仅适用于vue项目，无论是基于webpack构建的还是基于vite构建的，利用该插件可以实现自动到入，yyds！！！💞

安装

npm install unplugin-vue-components -D

基于vite项目

//vite.config.js or vite.config.ts
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

基于Vue-cli项目

//vue.config.js or vue.config.ts
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

基于webpack项目

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

module.exports = {
  plugins: [
    ComponentsPlugin({
      resolvers: [VantResolver()],
    }),
  ],
};

支持的库

Ant Design Vue

Ant Design Vue

解构名：AntDesignVueResolver

Element Plus

Element Plus

解构名：ElementPlusResolver

Element UI

Element UI

解构名：ElementUiResolver

HeadlessUi

HeadlessUi

解构名：HeadlessUiResolver

Idux

Idux

解构名：IduxResolver

Inkline

Inkline

解构名：InklineResolver

Naive UI

Naive UI

解构名：NaiveUiResolver

强烈推荐

PrimeVue

PrimeVue

解构名：PrimeVueResolver

Vant

Vant

解构名：VantResolver

VarletUI

VarletUI

注意：vue3语法用varlet，vue2语法用varlet-vue2 解构名：VarletUIResolver 比较推荐

VEUI

VEUI

解构名：VeuiResolver 一般推荐

iView/View Design

iView/View Design

解构名：ViewUiResolver 比较推荐

Vuetify

Vuetify

解构名：VuetifyResolver 一般推荐

Vuetify 3 Beta

Vuetify 3 Beta

解构名：Vuetify3Resolver

VueUse

VueUse

解构名：VueUseComponentsResolver OR VueUseDirectiveResolver

Quasar

Quasar

解构名：QuasarResolver

Arco Design

Arco Design

解构名：ArcoResolver 强烈推荐

layui-vue

layui-vue

解构名：LayuiVueResolver 强烈推荐

BootstrapVue

BootstrapVue2

BootstrapVue3

解构名：BootstrapVueResolver OR BootstrapVue3Resolver

TDesign

TDesign

解构名：TDesignResolver

DevUI

DevUI

解构名：DevUiResolver 强烈推荐(没有滚动条)