Vue 自动导入（import）代码 插件

自动导入

自动导入代码，例如：reactive, ref, onMounted,axios这些等一些组件库的API，无需每次都进行import。

Github：unplugin-auto-import

自动导入 Vite、Webpack、Rollup 和 esbuild 的 API。 支持 TypeScript。

安装

npm install unplugin-auto-import -D

使用方法

Vite

配置Vite

import AutoImport from 'unplugin-auto-import/vite';

AutoImport({
  // 要使用此插件的文件
  include: [
    "src/views/**/*.vue" // 这里代表src/views/目录下面的所有vue文件
  ],
  imports: [
    'vue', // Vue全部API
    'vue-router', //Vue路由全部API
    {
      'axios':[
        ['default','axios'], // import { default as axios } from 'axios'
      ],
    },
  ],
})

整体文件预览

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      // 要使用此插件的文件
      include: [
        "src/views/**/*.vue" // 这里代表src/views/目录下面的所有vue文件
      ],
      imports: [
        'vue', // Vue全部API
        'vue-router', //Vue路由全部API
        {
          'axios':[
            ['default','axios'], // import { default as axios } from 'axios'
          ],
        },
      ],
    }),
  ],
})