setup 语法让我们不用再一个一个的把变量和方法都 return 出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如 ref、computed、watch 等，还是每次都需要我们在页面上手动进行 import。我们可以通过 unplugin-auto-import 实现自动导入，无需 import 即可在文件里使用Vue的API
安装
1 | npm i unplugin-auto-import -D |
配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // vite.config.ts import { defineConfig } from 'vite' import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ AutoImport({ dts: 'types/auto-imports.d.ts', // 生成配置文件，如果是ts项目，通常我们会把声明文件放在根目录/types中，注意，这个文件夹需要先建好，否则可能导致等下无法往里生成auto-imports.d.ts文件 imports: ['vue', 'vue-router', 'pinia'], eslintrc: { enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成，一旦生成配置文件之后，最好把enable关掉，即改成false。否则这个文件每次会在重新加载的时候重新生成，这会导致eslint有时会找不到这个文件。当需要更新配置文件的时候，再重新打开 filepath: './.eslintrc-auto-import.json', // 生成json文件,可以不配置该项，默认就是将生成在根目录 globalsPropValue: true, }, }), ] }) |
安装配置完会自动生成auto-imports.d.ts文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // auto-imports.d.ts // Generated by 'unplugin-auto-import' // We suggest you to commit this file into source control declare global { const computed: typeof import('vue')['computed'] const createApp: typeof import('vue')['createApp'] const customRef: typeof import('vue')['customRef'] const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] const defineComponent: typeof import('vue')['defineComponent'] const effectScope: typeof import('vue')['effectScope'] const EffectScope: typeof import('vue')['EffectScope'] const getCurrentInstance: typeof import('vue')['getCurrentInstance'] const getCurrentScope: typeof import('vue')['getCurrentScope'] const h: typeof import('vue')['h'] const inject: typeof import('vue')['inject'] const isReadonly: typeof import('vue')['isReadonly'] const isRef: t ypeof import('vue')['isRef'] // ... } export {} |
注意types这个文件夹需要先建好，否则可能导致无法往里生成auto-imports.d.ts文件，例如：
剩余50%内容付费后可查看
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(3)
打赏
上一篇：Vue3中defineExpose暴露出来的数据如何响应式
共 0 条评论关于"vue3+vite2中使用unplugin-auto-import eslint插件vscode报错警告"
最新评论