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

相关推荐
晴殇i18 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
编程猪猪侠41 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
bemyrunningdog43 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
汪子熙1 小时前
深入探析 header facets:定位与应用
前端·javascript
江城开朗的豌豆1 小时前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
2401_881244401 小时前
javaweb———html
前端·javascript·html
江城开朗的豌豆1 小时前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子1 小时前
Web开发中的文件下载
前端·javascript·面试
KaneLogger2 小时前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
前端风云志2 小时前
JavaScript中如何遍历对象?
javascript