Skip to content

配置自动导入Vue组件

插件安装

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

然后,在你的vite.config.ts或vite.config.js文件中添加相应的插件配置:

js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    vue(),
    // 自动导入
    AutoImport({
      imports:[
        "vue",
        '@vueuse/core',
        "vue-router"
      ],
      dts:'src/auto-import.d.ts', // 路径下自动生成文件夹存放全局指令
      resolvers: [NaiveUiResolver] // 可以添加自定义resolver来自定义导入规则
    }),
    // UI框架自动导入
    Components({
      resolvers: [NaiveUiResolver()],
      dts: 'src/components.d.ts', // 生成类型声明文件(可选)
    }),
  ],
})