vue3项目，按需引入Element-plus ElMessage 样式丢失-编程知识

vue3项目，按需引入Element-plus ElMessage 样式丢失

文章目录

- Element-plus使用了自动按需导入
- 代码手动导入了API
- 样式丢失
- 解决方案
- Eslint报错

在这里插入图片描述

Element-plus使用了自动按需导入

vite.config.js配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// 按需引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// 按需引入AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()]})]
})

代码手动导入了API

如下

import { ElMessage } from "element-plus";ElMessage({showClose: true,message: '请输入正确的内容',type:'error'
})

样式丢失

此时会出现样式丢失问题。

在这里插入图片描述

解决方案

将上述代码导入import部分的代码去掉，直接调用。

ElMessage({showClose: true,message: '请输入正确的内容',type:'error'
})

Eslint报错

将ElMessage等都加入到.eslintrc globals字段里面

module.exports = {globals: {defineEmits: "readonly",defineProps: "readonly",defineExpose: "readonly",withDefaults: "readonly",WeixinJSBridge: "readonly",ElMessage: "readonly",ElMessageBox: "readonly",ElLoading: "readonly",}
}