vue3+vite+element-plus 配置按需自动导入

1、Vue3 API自动导入

• 配置unplugin-auto-import
• 解决ts,eslint不识别而导入报错的问题

2、按需引入UI组件库（element-plus,Element Plus Icon）

• 按需引入element-plus
• 自动导入 Element Plus Icon

一、Vue3 API自动导入

例如：

import {ref, reactive} from 'vue' // 每个组件需要手动引入
const name = ref('测试')

解决问题：避免在每个vue组件中都重复性的去声明ref,reactive等

需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons

vite.config.js或者vite.config.js配置如下：

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    // element 按需导入
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      //  全局自动引入文件存放路径；不配置或者true保存在根目录下,可以单独设置保存路径
      // dts: 'auto-import.d.ts',
      dts: true,
      resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon'
        })
      ],
       // 会在根目录下自动生成 .eslintrc-auto-import.json 文件
      eslintrc: {
        enabled: true // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
      }
    }),
    Components({
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          prefix: 'icon', //前缀，如果没有，默认添加i-eq作为icon前缀
          enabledCollections: ['ep']
        }),
        // 自动导入 Element Plus 组件
        ElementPlusResolver()
      ]
    }),
    Icons({
      autoInstall: true
    })
  ],
})

.eslintrc.cjs 中使用自动生成的 .eslintrc-auto-import.json 文件

module.exports = { 
    root: true, 
    extends: [ 
        // ... other 配置 
        './.eslintrc-auto-import.json' 
    ], 
}

tsconfig.json 里面配置如下：

"include": [
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.jsx",
    "src/**/*.vue",
    "*.d.ts" // 和 AutoImport dts保持一致 引入即可
  ],