Vue3+Vite神器：按需引入自定义组件unplugin-vue-components

前言

我们做项目时，会封装大量的公共组件，如果我们每一个都去在maints里面引入，非常麻烦不说，代码也不优雅。所以更好的方法就是自动注册全局组件，在组件中直接使用就好。

一种方法是自己在components文件夹下新建index.ts文件来导入并注册，最后在main.ts引入，具体方法见我之前的文章：http://t.csdn.cn/t0xbi

今天介绍的另一种非常牛的方法：Vite按需引入自定义组件unplugin-vue-components。

简介

unplugin-vue-components插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）。

这个插件好处在于，不需要自己去注册组件，不管是组件内的import还是main.ts里的注册！

此外！由于是按需引入，不像第一个方法那样整个components都全局注册，打包后体积也会更小！

使用步骤

1、安装插件

pnpm i unplugin-vue-components -D

2、vite中去使用：vite.config.ts中配置

...
// 这里
import Components from 'unplugin-vue-components/vite'export default ({ mode } : ConfigEnv) : UserConfig => {return {...plugins : [vue(),...// 这里Components({ dts : true }),],}
}

3、tsconfig.json中配置

配置完成后，运行代码，会在项目根目录自动生成一个components.d.ts文件。

需要在tsconfig.json的includes配置中加入此文件：

{"compilerOptions": {"target": "ES2020","module": "ES2020","moduleResolution": "node","strict": true,"jsx": "preserve","sourceMap": true,"resolveJsonModule": true,"removeComments": true,"esModuleInterop": true,"baseUrl": ".","noImplicitThis": true,"noEmitOnError": true,"paths": {"@/*": ["src/*"]},"lib": ["es2020", "dom","es5", "es6", "dom.iterable"],"skipLibCheck": true,"types": ["vite/client", "node"]},// 这里"include": ["src//*", "src//*.vue", "config//*", "./components.d.ts"],"exclude": ["node_modules", "dist", "dist-beta", "dist-production"]
}

觉得有用的话，点赞收藏哦~