element-plus如何实现自动与按需导入的详细解析？

本文共计732个文字，预计阅读时间需要3分钟。

element-plus 官方文档推荐用户采用按需引入的方式进行构建。我的项目使用 Vite 进行构建，通过利用 unplugin-vue-components 插件实现自动按需导入。具体操作如下：

1. 使用 Vite 构建项目。

2.安装并配置 unplugin-vue-components 插件。

3.在项目中引用 element-plus 组件时，只需导入所需组件即可。

element-plus根据官网文档，推荐用户采用按需导入的方式进行导入。

我的项目是使用vite进行构建的，根据官网的文档，利用unplugin-vue-components插件进行自动按需导入。

当我们使用element的标签时，无需再使用import对组件进行导入。

例如：

<el-button>test</el-button>

会自动引入ElButton组件。

不过当我们想要使用命令的方式创建element组件时，样式会无法自动引入。

我们以ElMessage为例。

import { ElMessage } from 'element-plus' ElMessage.warning('warning')

如果不采用import的方式引入，会直接报错：ElMessage没有定义。所以这个import是省不了了。但是import了之后，消息弹窗是出来了，但是却没有样式。这该怎么办呢？

仔细阅读文档，我们可以发现在手动导入里，使用了一个叫unplugin-element-plus的插件。