vue3整合element-plus时，不提示相关标签

Question

新建了一个vue3的项目，整合element-plus时，在main.ts中全局引入了element-plus相关的信息，倒是在使用的时候出现一个问题，webstorm没有提示相关的标签，但是其他项目是有提示的，所以应该不是编辑器的问题，这是什么问题，
具体如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'
import { createPinia } from 'pinia'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
//持久化
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate);
const app = createApp(App)

Object.keys(Icons).forEach(key => {
    app.component(key, Icons[key as keyof typeof Icons])
})
//app.config.globalProperties.$imageUrl = 'http://192.168.6.12:2001'
app.config.globalProperties.$imageUrl = 'http://143.20.108.185:2001'
app.use(ElementPlus,{
    locale: zhCn,
}).use(pinia).use(router)
app.mount('#app')

在页面中使用并没有相关标签的提示

这个也是报Unknown html tag el-input ，我在网上搜了一下说是添加libraries，但是我的libraries已经包含node_modules了，在node_modules中也包含element-plus的包，如下

这是哪里的问题，求解

Answer 1

【以下回答由 GPT 生成】

这个问题的原因可能是由于WebStorm无法正确识别Element Plus组件的类型信息。解决这个问题的方法是手动添加类型声明文件。

你可以按照以下步骤操作：

1. 创建一个名为element-plus.d.ts的新文件。
2. 在该文件中添加如下内容：

import 'element-plus/lib/theme-chalk/base.css';  // 引入Element Plus的样式文件
import { App } from 'vue';
import ElementPlus from 'element-plus';

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $message: ElementPlus.Message;
    $notify: ElementPlus.ElNotification;
    $confirm: ElementPlus.ElMessageBoxConstructor;
  }
}

declare module 'vue' {
  export interface GlobalComponents {
    ElFormItem: ElementPlus.ElFormItem;
    ElInput: ElementPlus.ElInput;
    // ... 在这里添加你需要的其他组件
  }
}

1. 确保该文件与main.ts位于同一目录下。
2. 在main.ts中添加以下一行代码，注册Element Plus的组件：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';

import './element-plus.d.ts';  // 引入你创建的类型声明文件

createApp(App)
  .use(ElementPlus)
  .mount('#app');

通过以上步骤，你应该可以在代码编辑器中获得Element Plus组件的提示了。

如果以上方法不起作用，可能是由于其他问题导致的。在这种情况下，建议参考Element Plus官方文档或者在相关的社区寻求帮助。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^