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

文章目录


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

vite.config.js配置如下:

javascript 复制代码
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

如下

javascript 复制代码
import { ElMessage } from "element-plus";

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

样式丢失

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


解决方案

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

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

Eslint报错

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

javascript 复制代码
module.exports = {
 globals: {
   defineEmits: "readonly",
   defineProps: "readonly",
   defineExpose: "readonly",
   withDefaults: "readonly",
   WeixinJSBridge: "readonly",
   ElMessage: "readonly",
   ElMessageBox: "readonly",
   ElLoading: "readonly",
 }
}

owlcity原文链接

相关推荐
轻语呢喃16 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人16 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
LRH20 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
自由逐风21 分钟前
前端小数点精度问题解析
javascript
断竿散人21 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
laperter22 分钟前
js中继承关系杂乱?这篇带你理清
javascript
婉婉耶23 分钟前
VUE带你乘风破浪~
前端·vue.js
小赖同学啊36 分钟前
光伏园区3d系统管理
前端·javascript·3d
前端进阶者44 分钟前
js通知提醒
前端·javascript
快起来别睡了1 小时前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript