首页 > 建站教程 > 前端框架 >  unplugin-vue-components 和 unplugin-auto-import正文

unplugin-vue-components 和 unplugin-auto-import

unplugin-vue-components 

插件的作用是自动导入第三方库或组件。

unplugin-auto-import

插件的作用是自动注册项目内的components组件。


使用方法

1.下载包

1npm install -D unplugin-vue-components unplugin-auto-import

2.在项目中配置

01// vite.config.ts
02import { defineConfig } from 'vite'
03import AutoImport from 'unplugin-auto-import/vite'
04import Components from 'unplugin-vue-components/vite'
05import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
06  
07export default defineConfig({
08  // ...
09  plugins: [
10    // ...
11    AutoImport({
12      resolvers: [ElementPlusResolver()],
13    }),
14    Components({
15      resolvers: [ElementPlusResolver()],
16    }),
17  ],
18})

默认情况下,生成的文件在src同级,如下图所示:

unplugin-vue-components 和 unplugin-auto-import

同样也可以指定位置,如下所示:

01AutoImport({
02      imports: ["vue""vue-router""pinia"],
03      //第三方组件库的解析器
04      resolvers: [ElementPlusResolver()],
05      //指定生成文件位置
06      dts: "src/auto-imports.d.ts",
07}),
08Components({
09      // dirs 指定组件所在位置,默认为 src/components
10      dirs: ['src/components'],
11      resolvers: [ElementPlusResolver()],
12      dts: "src/components.d.ts",
13}),


下一篇: 最后一页