vue3+typescript 按需导入element-plus组件

element-plus里带标签的组件按照官方文档的方式按需引入都是没有问题的，例如 el-button、el-input等等，但是一些需要通过api调起的组件不能正常使用，例如 ElMessage.error("错误消息")。

除了按照官方文档的设置外，还需结合手动导入里的 unplugin-element-plus插件，否则那些通过api调起的组件样式文件不能正常加载，最终配配置好的vue.config.ts文件如下

const ElementPlus = require('unplugin-element-plus/webpack')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
    configureWebpack: {
        plugins: [
            // 这里是解决只调用组件api无法显示的问题,比如ElMessage
            ElementPlus({
                importStyle: 'sass',
                useSource: true
            }),
            // 下面是按需导入的配置
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
        ]
    }
}

我感觉这应该也是一个过渡的方式，官方的文档和组件功能都还在完善过程中，等到你看到这篇文章时如果有更好的方式记得告诉我哦！