Element Plus 配置自动按需引入后，手动引入组件，组件样式丢失

起因

最近在尝试使用 Element Plus 写一些简单的页面，跟着官方文档走配置了自动按需引入：

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

// 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()],
    }),
  ],
})

官网文档链接

我使用到了一个 ElTree 组件，把官方实例代码拷过来后，怎么看都跟官网文档上的样式不一样。F12一看，对应的html标签里有类名，但是在style里面却找不到类名对应的样式。于是尝试手动引入组件样式：

import 'element-plus/es/components/tree/style/css'

但是这样做却也是无济于事。

在网上一顿搜索也没找到解决办法，甚至连样式丢失的原因也找不到，真是见鬼。

无意间的发现

偶然间，我把代码里面的一个import给注释掉了：

// import { ElTree } from "element-plus";

神奇的是样式居然恢复正常了，F12，style里面也能找到对应的样式了，我才意识到可能是配置自动按需引入后，再手动引入组件会导致冲突，看来自动按需引入插件还不够完善。

上面的手动引入是因为代码中要使用组件的模板引用，给ref做类型标注用的：

const treeRef = ref<InstanceType<typeof ElTree>>()

将上面的手动引入去掉后虽然丢失的样式回来了并且编译也不会报错，但是vscode老是标红，代码提示也没了，看着很难受。

解决办法

如果你不在意vscode报错，大可直接去掉手动组件import，可以正常编译运行。但是像我这样的强迫症患者实在没法接受。

为了使组件自动按需引入和手动引入共存，我想到了一个办法，使用一个ts文件作为中转，例如：

// types.ts
import { ElSelect, ElTree } from "element-plus";

export type ElTreeType = InstanceType<typeof ElTree>;
export type ElSelectType = InstanceType<typeof ElSelect>;

然后直接在.vue文件里面直接导入所需要的组件type即可。