【element-plus】自动导入 + typescript 提示

1、自动导入

2、引用加载组件类型提示

第一步：安装自动导入功能所需的插件 

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

 第二步：

vite版：

// vite.config.ts
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: [
    // ...
    AutoImport({ //必须
      resolvers: [ElementPlusResolver()], //必须
    }), //必须
    Components({ //必须
      resolvers: [ElementPlusResolver()], //必须
    }), //必须
  ],
})

webpack版

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

第三步：使用组件库时获取ts类型提示 >  tsconfig.json 文件的 types 添加ts文件路径

编辑器安装 Volar 插件(新名字 Vue - Official)

{
    "compilerOptions": {
        "types": [
            "element-plus/global" //必须
        ],
    },
}