vite + vue + ts automatically import Element Plus components on demand, and how to solve the problem of ElMessage and ElLoading after on-demand import (the name "ElMessage" problem cannot be found.)

The problem of ElMessage and ElLoading after the on-demand introduction, two-step elegant solution to the problem that the name "ElMessage" cannot be found. No need to import npm packages, no need to download anything, just five lines of code

Table of contents

1. Add Element Plus component library

1.2. Download

1.2, automatic import (official recommendation)

2. Problems with ElMessage and ElLoading after importing on demand

2.1, solve the problem

2.2, the following is the reason for the analysis, if you are interested, you can take a look

---

1. Add Element Plus component library

1.1. Download

 npm

 npm install element-plus --save

  yarn 

 yarn add element-plus 

1.2. Download element-icon

npm install @element-plus/icons-vue

 element-icon is also automatically imported, but I feel more troublesome, so let’s import it manually

Manual import method:

import { Grid, RefreshRight } from "@element-plus/icons-vue";

1.3, automatic import (official recommendation)

First you need to install unplugin-vue-components and  unplugin-auto-importthese two plugins

If you came from vite+vue3+ts to teach you to create a vue3 project   , you have already downloaded it, so you don’t need to download it again, just add the line with the element comment

npm install -D unplugin-vue-components unplugin-auto-import

 vite.config.ts file

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
//element
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),

    //element按需导入
    AutoImport({
      //安装两行后你会发现在组件中不用再导入ref，reactive等
      imports: ['vue', 'vue-router'],
      dts: "src/auto-import.d.ts",
      //element
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      //element
      resolvers: [ElementPlusResolver()],
      //默认存放位置
      //dts: "src/components.d.ts",
    }),
  ],

})

2. Problems with ElMessage and ElLoading after importing on demand

2.1, solve the problem

1. Create an Element-puls.d.ts file (if you think the name is not good, you can change it, but it should end with .d.ts )

export {}
declare global {
  const ElMessage:typeof import('element-plus')['ElMessage'] 
  const ElLoading:typeof import('element-plus')['ElLoading'] 
}

 2. Then add a line of code to the tsconfig.json file

{
    .......
	"include": [
		"src/**/*.ts",
		"src/**/*.d.ts",
		"src/**/*.tsx",
		"src/**/*.vue",
        //添加这行
		"Element-puls.d.ts"
		],
}

This is done, see the effect

2.2, the following is the reason for the analysis, if you are interested, you can take a look

Reason: They are different from ordinary label components. Both of them are APIs that can run on scripts, and this file is also imported into the global API, and then can be used in scripts. In this file, it is automatically imported on demand. of,

You can look at the export of the source code, node_modules >element-plus>global.d.ts

// Ignore the **** comment, so that you can see all the content

It can be seen that this is divided into two types,

One is GlobalComponents (global components),

One is  ComponentCustomProperties (component custom properties)

 

However, the automatic import will only import  GlobalComponents (global components) in your components.d.ts file  ,

But will not import  ComponentCustomProperties (component custom properties)

*****And I suddenly felt, why not also import component custom properties

So why not with?

       This is because the configuration in vite.config.ts will automatically refresh the code in src/auto-import.d.ts every time the content in imports is parsed and placed in dts.

 

 Once you know the reason, it is not difficult to solve it.