你还在手动引入组合式API吗？尝试下自动引入吧

vue3已经由vue2的选项式API改为组合式API，这意味着我们需要每次都手动引入。或许有人会说vscode等编辑器会帮你自动引入，但在我实际开发过程中发现编辑器的引入还是有些问题，有一定的几率会出错，如果代码一多，检查bug起来就比较麻烦，检查很久最后发现bug是因为没有正确引入造成的真的会感觉到吐血。所以我在此推荐一款自动引入组合式API的插件unplugin-auto-import。

以下我会以vue3+vite+ts为例

安装

pnpm

pnpm i unplugin-auto-import -D

yarn

yarn add unplugin-auto-import -D

配置

vite.config.ts

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

plugins: [
            AutoImport({
                dts: 'auto-imports.d.ts', // 生成配置文件
                imports: ['vue', 'vue-router', 'pinia'],
                eslintrc: {
                    enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成，一旦生成配置文件之后，最好把enable关掉，即改成false。否则这个文件每次会在重新加载的时候重新生成，这会导致eslint有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
                    globalsPropValue: true,
                },
                resolvers: [ElementPlusResolver()],
            }),
        ]

这样就配置好了 但这时候如果安装了eslintrc和使用了ts所以会检测到找不到对应的API，所以还需要做相应的处理。

新增.eslintrc-auto-import.json

在配置中增加eslintrc的设置，enabled为true时运行会自动生成一个json文件.eslintrc-auto-import.json应用于eslintrc

// vite.config.ts
eslintrc: {
    enabled: true,
    globalsPropValue: true,
},

// .eslintrc.js
extends: [
    './.eslintrc-auto-import.json',
],

tsconfig.json

"include": [
    "auto-imports.d.ts"
 ],