vite + vue + ts 自动按需导入 Element Plus组件，并如何解决按需引入后ElMessage与ElLoading 的问题（找不到名称“ElMessage”问题。）

本文介绍: 自动导入 element–p ul s 组件，以及按需引入后ElMessa ge与ElLoad in g的问题。两步优雅解决找不到名称“ElMessa ge”问题，

按需引入后ElMessa ge与ElLoad in g 的问题，两步优雅解决找不到名称“ElMessa ge”问题。不需要导入 npm包，不需要下载任何东西，只要五行代码

 npm install element-plus --save

 yarn add element-plus

npm install @element-plus/icons-vue

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

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

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",
    }),
  ],

})

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

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

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

1、添加Element Plus 组件库

1.1、下载

1.2、下载 element–icon

1.3、自动导入(官方推荐)

2、按需引入后ElMessage与ElLoading 的问题

2.1、解决问题

2.2、下面是分析原因,有兴趣可以看一下

发表回复取消回复

1、添加Element Plus组件库