唯品秀前端博客

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文件,例如:

vue组件中使用

1
2
3
4
5
6
7
8
<script lang="ts" setup name="OrderList">
// 不用import,直接使用ref
const count = ref(0)

onMounted(() => {
  console.log('mounted===')
})
</script>

解决eslint报错

在没有 import 的情况下使用会导致 eslint 提示报错,通过如下步骤解决:

1
2
3
4
5
6
// eslintrc.js
module.exports = {
  extends: [
    './.eslintrc-auto-import.json'
  ]
}

解决ts警告

如果是ts项目,单单上面配置还不够,我们还需要在tsconfig.json文件引入声明文件: include中引入auto-imports.d.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./types/auto-imports.d.ts" // 此处引入该声明文件,注意先前生成好的声明文件地址
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"vue3+vite2中使用unplugin-auto-import eslint插件vscode报错警告"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏