vite+vue3使用unplugin-auto-import 无需手动引入api！

近期了解到unplugin-auto-import这个插件

用途是无需每个组件内重复的引入vue vue-router等内置方法 下面举个例子

<script setup>
import {ref, reactive} from "vue";

let num = ref(0);

let state = reactive({
    list: [],
    ...
})
</script>

　　引入这个插件之后

<script setup>
let num = ref(0)；

let state = reactive({
　　list:[],
　　...
});

// 无需引入 如果是ts的话 做好配置后不会引起警告和报错
</script>

下面开始按照步骤从0到1的走完使用流程！

第一步：下载npm包到项目中

npm install unplugin-auto-import -D

yarn add unplugin-auto-import -D

pnpm add unplugin-auto-import -D

第二步：在vite.config.js中使用插件

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

// 自动引入api
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
  vue(),
  AutoImport({
    include: [
      /\.[tj]sx?$/,
      /\.vue$/,
      /\.vue\?vue/,
      /\.md$/,
    ],
    imports: [
      // 插件预设支持导入的api
      'vue',
      'vue-router',
    ]
  })]
})
https://github.com/antfu/unplugin-auto-import 插件github网址 可以查看更多配置

项目内使用Typescript的话 还有第三步！如使用的是Javascript 即可忽略：在根目录下的tsconfig.json文件中增加以下代码

{
  "include": [
　　　　...
       "./auto-imports.d.ts"
    ]
}

以上步骤完成之后 重启终端 即可使用 vue, vue-router的api了 无需引入，非常方便！