0
点赞
收藏
分享

微信扫一扫

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

一脸伟人痣 2022-05-05 阅读 113

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

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

举报

相关推荐

0 条评论