🏝 Tree-shakable, only registers the components you use. 🪐 Folder names as namespaces. 🦾 Full TypeScript support. 🌈Built-in resolversfor popular UI libraries. 😃 Works perfectly withunplugin-icons. Installation npm i unplugin-vue-components -D ...
unplugin-vue-components 是由 Vue官方人员开发的一款自动引入插件,可以省去比如 UI 库的大量 import 语句。 //1、安装npm i unplugin-vue-components -D//2、配置import { AntDesignVueResolver }from'unplugin-vue-components/resolvers'import Componentsfrom'unplugin-vue-components/vite'import { defineConfig...
plugins: [ Components({ dirs: ['src/components'],// 配置需要默认导入的自定义组件文件夹,该文件夹下的所有组件都会自动 import resolvers: [AntDesignVueResolver({ importStyle:false, resolveIcons:true})] }) ] }
Or work withunplugin-vue-componentsresolvers importIconsResolverfrom'unplugin-icons/resolver'importViteComponentsfrom'unplugin-vue-components/vite'// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:['unplugin-icons/nuxt',],vite:{plugins:[ViteComponents({resolvers:[IconsResolver({/* options */})...
import ViteComponents from 'unplugin-vue-components/vite' import IconsResolver from 'unplugin-icons/resolver' // nuxt.config.ts export default defineNuxtConfig({ modules: [ 'unplugin-icons/nuxt', ], vite: { plugins: [ ViteComponents({ resolvers: [ IconsResolver({/* options */}), ], }...
import IconsResolver from 'unplugin-icons/resolver' import ViteComponents from 'unplugin-vue-components/vite' // nuxt.config.ts export default defineNuxtConfig({ modules: [ 'unplugin-icons/nuxt', ], vite: { plugins: [ ViteComponents({ resolvers: [ IconsResolver({/* options */}), ], }...
Components({ dirs: ['src/components'], // 配置需要默认导⼊的⾃定义组件⽂件夹，该⽂件夹下的所有组件都会⾃动 import resolvers: [AntDesignVueResolver({ importStyle: false, resolveIcons: true })]})]} 这⾥以 ant-design-vue 为例，引⼊包⾥⾃带的 AntDesignVueResolver 函数（主流...
vite'exportdefaultdefineConfig({plugins:[vue(),AutoImport({imports:['vue','vue-router',// 其他需要自动导入的库],}),Components({// 配置需要自动注册的组件dts:true,resolvers:[(name)=>{if(name.startsWith('Base')){return{importName:name.slice(4),path:`@/components/${name}.vue`}}},],...
unplugin-icons 是一个为 Vue 3 项目设计的插件,用于简化图标的使用。它允许开发者通过简单的组件引用方式来使用各种图标库中的图标,而无需手动导入每个图标文件。这个插件利用了 Vite 或 Webpack 等构建工具的插件系统,实现了图标文件的按需加载和自动优化。
以vue3 + vite + antd 为例,其它请查看官方文档. 1. 安装插件 // 安装插件 yarn add unplugin-vue-components -D // 安装antd yarn add ant-design-vue@next 2.修改vite.config.js // vite.config.js import Components from 'unplugin-vue-components/vite' import { AntDesignVueResolver } from 'un...