unplugin-vue-components

比如说Element Plus

安装unplugin-vue-components

npm install unplugin-vue-components -D

Vite配置

// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver
} from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      // ui库解析器，也可以自定义
      resolvers: [
        ElementPlusResolver()
      ]
    })
  ]
})

插件会生成一个ui库组件以及指令路径components.d.ts文件

unplugin-vue-components

注意还需要在tsconfig.json里面添加上刚刚自动生成的components.d.ts文件（不然自定义的组件会有错误提示找不到文件）

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"]
    }
  },
  "include": [
  "src/**/*.ts",
  "src/**/*.d.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "./components.d.ts"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}