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地址

相关推荐
凉白开<--4 小时前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
Zz_waiting.7 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
GISer_Jing8 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
F2E_Zhangmo8 小时前
基于cornerstone3D的dicom影像浏览器 第一章 webpack5+vue2+cornerstonejs项目创建
vue·cornerstone·cornerstone3d·cornerstonejs
摇滚侠18 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记02
vue
zhong liu bin19 小时前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
知识分享小能手20 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
知识分享小能手1 天前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
赵得C1 天前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件