Solve the failure of using element-plus to introduce ElLoading and ElMessage styles on demand in vue3+vite+TS

ElMessage style invalid

In fact, he is not invalid, it is just loaded into our

You can see the method and effect diagram below, the problem encountered by element-plus of vue3, because it needs to be tested, so the frequency of clicking is relatively large, but you can clearly see that the ElMessage style is displayed at the bottom of your browser

import { ElMessage } from "element-plus";

//点击登录提示信息
const handleSubmit = () => {
      ElMessage({
        showClose: true,
        message: "登录注册成功",
        type: "success",
      });
}

 solution

I checked many kinds on the Internet, and I listed two kinds separately

1. main.tsImport it again, like this, just restart the project after importing

import "element-plus/theme-chalk/el-message.css";
import "element-plus/theme-chalk/el-message-box.css"; 

2. Because we are using on-demand import, so there is no need to import element-plus, just delete the following code

import { ElMessage } from "element-plus";

 Then just intercept the detection of ts. The way of interception: //@ts-ignore

Just use //@ts-ignore on the prompt message you use element-plus, his // is not for commenting, I also see that it is used like this on the Internet, I don’t know the specific principle

//点击登录提示信息
const handleSubmit = () => {
      //@ts-ignore
      ElMessage({
        showClose: true,
        message: "登录注册成功",
        type: "success",
      });
}

ElLoading style invalid

It is not invalid, it is also hidden at the bottom of the browser

 

 solution

The problem of ElLoading is the same as that of ElMessage, and the solution is the same. Just add ts interception to the method you use it //@ts-ignore,

Summarize

The most convenient way to solve the above problems is to use ts to intercept, but in the project, it is not necessary to use it every time the code report slides down the red wavy line, because we use element-plus to import on demand, and our node dependency package contains this style , but ts has a bus, and ts can’t find this method, so it will give you a downward red wavy line. In fact, this effect is annoying to watch, so you can use ts to intercept it at this time to prevent him from sliding Red wavy lines.