深夜钻牛角尖钻懵逼了，求前段大佬解惑

[ajaxgoldfish]

深夜钻牛角尖钻懵逼了，求前段大佬解惑，本人前端小白，但是现在在做自己的项目只能自己来搞前端。

我想使用 Element-plus 的 Message ，一开始接触的 vue2+elementui+js ，直接：

this.$message('这是一条消息提示');

就能用。

现在的项目是 vue3+ts+Elementui-plus

有一种可用的是：

//按需引入
import { ElMessage } from "element-plus";

//然后再调用
ElMessage.success("这是一条消息提示");

我嫌这种太麻烦，想弄和 vue2 那种，然后各种 google 、chatgpt 、copilot 、得出的答案都是：

//main.ts 中全局挂载
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);
app.use(ElementPlus);

app.config.globalProperties.$message = ElementPlus.ElMessage;//但是此处报错

错误如下：

Property 'ElMessage' does not exist on type '{ version: string; install: (app: App<any>, options?: Partial<ConfigProviderProps> | undefined) => void; }'.ts(2339)

请教大佬们，怎么才能在 vue3 ts element-plus 环境下像 vue 环境下优雅地使用 Message 消息提示

this.$message('这是一条消息提示');//类似于这种

[renmu]

unplugin vue components 搭配 auto import

[lisongeee]

问题可以改成 如何扩展外部 package 内部的 typescript 类型

[learningman]

declare module 请

[mxT52CRuqR6o5]

改掉自己的强迫症，使用按需引用的方式

[lsry]

改掉自己的强迫症，使用按需引用的方式

[Shook]

这里有一个相关问题的 stackoverflow 的链接，或许能够帮到你： https://stackoverflow.com/questions/64175742/using-globalproperties-in-vue-3-and-typescript

但既然都用上 Vue 3 了，还是希望你能多用心学习一下 Composition API ，因为整体来看这套新的系统是更舒服的选择： https://vuejs.org/guide/extras/composition-api-faq.html

[kdwnil]

你查到的做法是没有问题的，只是没能通过类型检查。同意 #2 的说法

但到了 Vue3 还是推荐改用按需引入的方式，反正你只管在 IDE 里打字，引入可以靠 Tab 补全

[zqguo]

改掉自己的强迫症，使用按需引用的方式

[musi]

你说的这个优雅看起来不太优雅

[snowma]

1 楼正解, 贴点代码给你
-------------------------------------------
import { resolve } from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
.....
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [
ElementPlusResolver({ importStyle: 'sass' })
....

[wqzjk393]

看官方文档，有全局导入和自动导入两种方式

[toesbieya]

一群答非所问的什么意思啊
element-plus 的 default 导出不包含 ElMessage ，而且你自己不是已经 import { ElMessage }了吗，app.config.globalProperties.$message = ElMessage 不就可以了

[Jaosn]

还在用 this ？？？

[lingxiaoli]

@toesbieya #12 这个唯一不太好用的地方是每个要用 message 的地方都要从实例属性里取, 不过这样子也比 this.强太多了

[toesbieya]

@lingxiaoli #14 看情况吧，要在 template 里用的比如国际化$t 这么写我觉得可以，this.主要是类型不好做，能做好啥事没有

[anguiao]

用了 TS 就不要用 Options API 了，Composition API 里面是没有 this 的。喜欢把各种东西挂在全局上的做法也并不推荐。

然后说回来，你的用法并没有错，只是内置的类型声明中，没有包含“$message”，所以会报类型错误。请参照文档自行添加，加了之后应该就没有问题了。
文档链接： https://cn.vuejs.org/api/utility-types.html#componentcustomproperties

[ljpCN]

#12 @toesbieya 正解，不知道一群答非所问的在说什么。另外 op 非要用 `ElementPlus.ElMessage` 的话，可以试一下 `import * as ElementPlus from "element-plus";`。我猜测也许是可行的。直接用 `import ElementPlus from 'element-plus';` 只是导入了这个包的默认导出。

[ajaxgoldfish]

@anguiao 佬，假如已经成功挂在全局上了，那在组合式 api 中是不是照样不能用全局挂载的 this.messege ，而只能在选项式 api 中用全局挂载的 this.messege ？

[ajaxgoldfish]

在此谢过楼上的兄弟们了，不一一回复了
@ljpCN
@anguiao
@toesbieya
@lingxiaoli
@Jaosn
@toesbieya
@wqzjk393
@snowma
@musi
@zqguo
@kdwnil
@Shook
@lsry
@mxT52CRuqR6o5
@learningman
@lisongeee
@renmu

[anguiao]

@ajaxgoldfish
没法直接访问，好像可以从 setup 的 context 参数里面取，具体的我记不清了，而且这样操作下来也并不方便。
如果不想每个组件都引入的话，最好的办法应该是前面有人提过的，配置自动导入，而不是挂载在全局上。