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原文链接

相关推荐
前端小巷子2 分钟前
web实现文件的断点续传
前端·javascript·面试
jojo是只猫42 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机5 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原13 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色13 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端