前端|element-plus的自动导入和按需导入 spring|boot|java|spring|html

element-plus根据官网文档，推荐用户采用按需导入的方式进行导入。
我的项目是使用vite进行构建的，根据官网的文档，利用unplugin-vue-components插件进行自动按需导入。
当我们使用element的标签时，无需再使用import对组件进行导入。
例如：

test

会自动引入ElButton组件。

文章图片

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

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

如果不采用import的方式引入，会直接报错：ElMessage没有定义。所以这个import是省不了了。但是import了之后，消息弹窗是出来了，但是却没有样式。这该怎么办呢？
仔细阅读文档，我们可以发现在手动导入里，使用了一个叫unplugin-element-plus的插件。该插件的官方文档有详细的使用说明，插件的主要功能如下：

import { ElButton } from 'element-plus'//↓ ↓ ↓ ↓ ↓ ↓import { ElButton } from 'element-plus' import 'element-plus/es/components/button/style/css'

我们可以看出，这个插件其实就是把你需要的组件的css或者sass文件自动引入进来，刚好弥补了上面的问题。
最后我们如下配置项目：
首先我们要安装unplugin-vue-components和unplugin-element-plus。

npm i unplugin-vue-components unplugin-element-plus -D

之后配置一下vite.config.js文件。

import ElementPlus from 'unplugin-element-plus/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({ plugins: [ ElementPlus({ importStyle: 'sass', useSource: true }), Components({ resolvers: [ElementPlusResolver()] }) ] })

【前端|element-plus的自动导入和按需导入】这样配置之后，我们就可以享用element-plus的自动导入了。当然使用命令的组件还是需要你手动导入一下的。