Element-plus 按需引入时的一些坑

我正在参加「掘金·启航计划」

最近使用 vue3 + js + vite + element-plus 做的一个项目出现了一些奇怪的问题。

首先是这个 element-plus 组件的按需引入功能，按照官网提示安装了两款插件，并且配置了 vite 文件，

安装的插件： npm install -D unplugin-vue-components unplugin-auto-import

配置 vite.config.js:

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

上面的是官网原教程。

但是对于 ElMessage 弹窗提示，这个自动引入不生效！！

我还以为是我没有写对，检查了一番，发现弹窗组件是可以触发的，只不过在页面最低部，就没有被留意到

为什么会出现在底部呢？ 只可能是因为没有样式，难道是因为自动导入配置错误了吗？于是我试了试其他组件，发现都是可以正常使用的，那么自动导入应该是生效的

这时候百度了一下，发现确实有类似的问题

于是我便在 mian.ts 中引入了 elmenets-plus 的样式:import 'element-plus/dist/index.css'

这时候才正常了。

靠，控制台也没有什么报错信息，因此才会一脸懵逼。。