vue3+vite+element-plus下使用unplugin-auto-import自动导入，并解决eslint、typescirpt变量报错问题

文章索引

一、安装

npm i -D unplugin-auto-import

1	npm i -D unplugin-auto-import

二、配置vite.config.ts

// 按需自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default ({ mode }) => {
  return defineConfig({
    ...
    plugins: [
      ...
      AutoImport({
        resolvers: [
          ElementPlusResolver()
        ],
        dts: './auto-imports.d.ts',
        eslintrc: {
          enabled: true,
          filepath: './.eslintrc-auto-import.json',
          globalsPropValue: true
        }
      })
    ]
})

// 按需自动导入

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default ({ mode }) => {

return defineConfig({

...

plugins: [

...

AutoImport({

resolvers: [

ElementPlusResolver()

dts: './auto-imports.d.ts',

eslintrc: {

enabled: true,

filepath: './.eslintrc-auto-import.json',

globalsPropValue: true

}

})

]

})

三、添加.eslintrc-auto-import.json

{
  "globals": {}
}

{

"globals": {}

}

四、配置.eslintrc

{
  ...
  "extends": [
    ...
    "./.eslintrc-auto-import.json"
  ]
}

{

...

"extends": [

...

"./.eslintrc-auto-import.json"

]

}

五、配置tsconfig.json

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

{

...

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

}

六、文档

https://github.com/antfu/unplugin-auto-import