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文件,例如:
上一篇:Vue3中defineExpose暴露出来的数据如何响应式
支付宝扫一扫打赏
微信扫一扫打赏
共 0 条评论关于"vue3+vite2中使用unplugin-auto-import eslint插件vscode报错警告"
最新评论