位置: IT常识 - 正文

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

编辑：rootadmin

推荐整理分享vite + vue + ts 自动按需导入 Element Plus组件，并如何解决按需引入后ElMessage与ElLoading 的问题（找不到名称“ElMessage”问题。），希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

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

1、添加Element Plus组件库

1.2、下载

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

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

2.1、解决问题

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

1、添加Element Plus组件库1.1、下载

npm

npm install element-plus --save

yarn

yarn add element-plus 1.2、下载element-iconnpm install @element-plus/icons-vue

element-icon也有自动导入的,但我感觉更麻烦,所有还是手动导入吧

手动导入方式:

import { Grid, RefreshRight } from "@element-plus/icons-vue";1.3、自动导入(官方推荐)

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

如果你是从vite+vue3+ts 手把手教你创建一个vue3项目过来的,已经下过了,就不用再下了,只要添加有element注释的那行就行

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

vite.config.ts文件

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';//elementimport { 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、按需引入后ElMessage与ElLoading 的问题2.1、解决问题

1.创建一个 Element-puls.d.ts 的文件（如果觉得名字不好，可以改，但要以.d.ts结束就行）

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

2.然后在 tsconfig.json 文件添加一行代码

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