Introducing ElMessage on demand, no styles and failed type checking

Insert image description here

Article directory

ElMessage pop-up box has no style

Problem Description

Element-plus has no style when using the ElMessage message pop-up box. It is introduced according to the official on-demand loading method.

import {
    
     ElMessage } from "element-plus";

ElMessage.success('修改成功！')

solution

As long as it is imported on demand, there is no need to import it manually. Otherwise the style will not take effect.

Of course, if you import the module manually and then import all element-plus styles globally, this will also take effect. But this is no longer import on demand

// 去掉引用
// import { ElMessage } from 'element-plus'

ElMessage.success('修改成功！')

ts type check failed

Problem Description

If you do not import manually, you will find that ElMessage will fail the type check. 找不到名称ElMessageAn error like this will be reported :

Although the development environment can tolerate the red line and ignore it and can be used normally, the packaging and build will fail. Because there will be strict type checking vue-tsc when building. Therefore this problem must be solved.

Solution

In fact, the automatic import already has the type declaration of ts, which is in auto-imports.d.tsthe file. But why can't the editor detect the type?
Because there are no files in the type file range included in tsconfig.json auto-imports.d.ts. In vite's vue template, the default scope of included type files is only in the src directory:

"include": ["src/**/*.d.ts", ...]

Therefore, it auto-imports.d.tsis enough to include it in the detection range of ts type.

"include": ["*.d.ts", "src/**/*.d.ts", ...],

eslint check failed

Problem Description

Now ts no longer has type errors, but if eslint is configured, eslint will start reporting errors.

You can see that vscode can give a type hint for ElNotification, indicating that ts has been recognized, but the eslint check still fails.

Solution

The method must tell eslint that these APIs are global methods.

A plug-in imported on demand AutoImport, it supports automatic declaration of imported ElMessage and other methods as global variables.

AutoImport({
    
    
  // Generate corresponding .eslintrc-auto-import.json file.
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  eslintrc: {
    
    
    enabled: false, // Default `false`
    filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  }
}),

Turn on automatic export:

AutoImport({
    
    
    resolvers: [ElementPlusResolver({
    
     importStyle: "sass" })],
  	eslintrc: {
    
    
      enabled: true // 开启生成 eslint 的全局变量文件
    }
}),

After the configuration is turned on, the corresponding .eslintrc-auto-import.jsonconfiguration file will be automatically generated in the same directory as the vite file by default.

{
    
    
  "globals": {
    
    
    "ElMessage": true,
    "ElNotification": true
  }
}

Then inherit the configuration of the global variable in the eslint configuration file:

extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended",
    "./.eslintrc-auto-import.json"
],

If you dislike too many configuration files being generated, you can also manually declare global variables under eslint in the eslint configuration file, so that the vite configuration file is not needed:

extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended",
    // "./.eslintrc-auto-import.json"
],
globals: {
    
    
    // 全局变量
    ElMessage: "readonly",
    ElNotification: "readonly"
},