unplugin-vue-components
插件的作用是自动导入第三方库或组件。
unplugin-auto-import
插件的作用是自动注册项目内的components组件。
使用方法
1.下载包
1 | npm install -D unplugin-vue-components unplugin-auto-import |
2.在项目中配置
02 | import { defineConfig } from 'vite' |
03 | import AutoImport from 'unplugin-auto-import/vite' |
04 | import Components from 'unplugin-vue-components/vite' |
05 | import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' |
07 | export default defineConfig({ |
12 | resolvers: [ElementPlusResolver()], |
15 | resolvers: [ElementPlusResolver()], |
默认情况下,生成的文件在src同级,如下图所示:
同样也可以指定位置,如下所示:
02 | imports: [ "vue" , "vue-router" , "pinia" ], |
04 | resolvers: [ElementPlusResolver()], |
06 | dts: "src/auto-imports.d.ts" , |
10 | dirs: [ 'src/components' ], |
11 | resolvers: [ElementPlusResolver()], |
12 | dts: "src/components.d.ts" , |