vue3项目配置按需自动引入自定义组件unplugin-vue-components

我们通常在项目中,需要手动引入自定义的各种组件,如果涉及的页面功能比较多的话,光是import的长度都能赶上春联了。

如果,能有一个插件帮我们实现自动引入,是不是要谢天谢地了呢?

接下来就进入我们的主角**unplugin-vue-components,**这就是前端大神Anthony Fu写的的非常好用的插件,其实已经被vite官方收录了

1、安装unplugin-vue-components
复制代码
npm i unplugin-vue-components -D
2、配置vite.config
复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import Components from 'unplugin-vue-components/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), Components(),],
})
3、验证

将你引入自定义组件的import*****之类的语句,去掉,依旧正常运行

你是否会有疑问,如果是这样,如果不同包的同名文件会怎么样呢?

作者提供了一个简单的解决办法,一句两句说不清,具体看我整理的这篇文章:

unplugin-vue-components解决命名冲突

小Tips:

Anthony Fu,在Git上的账号是antfu,是Vue和Vite核心成员,同时也是VueUse、Slidev几个开源项目的作者......,他的一些插件都是非常非常实用的!

有兴趣的小伙伴可以去git看下,unplugin-vue-components的github地址

相关推荐
喜欢敲代码的程序员6 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_8 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte14 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj10 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D10 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说10 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说11 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画
sunbyte11 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DrinkWater(喝水记录组件)
前端·javascript·css·vue.js·vue
麦兜*11 天前
【node】Mac m1 安装nvm 和node
java·前端·vue.js·chrome·macos·vue·nvm
胡斌附体11 天前
关于vue.mixin与vue.use的用法分析
vue·区别·mixin·通用·use·生活类比