V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ajaxgoldfish
V2EX  ›  Vue.js

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

  •  
  •   ajaxgoldfish · 2023-03-23 23:51:40 +08:00 · 4926 次点击
    这是一个创建于 618 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    我想使用 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('这是一条消息提示');//类似于这种
    
    23 条回复    2023-03-24 14:31:31 +08:00
    renmu
        1
    renmu  
       2023-03-23 23:59:45 +08:00 via Android   ❤️ 1
    unplugin vue components 搭配 auto import
    lisongeee
        2
    lisongeee  
       2023-03-24 00:18:13 +08:00   ❤️ 1
    问题可以改成 如何扩展外部 package 内部的 typescript 类型
    learningman
        3
    learningman  
       2023-03-24 00:33:22 +08:00   ❤️ 1
    declare module 请
    mxT52CRuqR6o5
        4
    mxT52CRuqR6o5  
       2023-03-24 00:37:53 +08:00 via Android   ❤️ 1
    改掉自己的强迫症,使用按需引用的方式
    lsry
        5
    lsry  
       2023-03-24 01:48:55 +08:00   ❤️ 1
    改掉自己的强迫症,使用按需引用的方式
    Shook
        6
    Shook  
       2023-03-24 01:55:46 +08:00   ❤️ 1
    这里有一个相关问题的 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
        7
    kdwnil  
       2023-03-24 02:17:07 +08:00   ❤️ 1
    你查到的做法是没有问题的,只是没能通过类型检查。同意 #2 的说法

    但到了 Vue3 还是推荐改用按需引入的方式,反正你只管在 IDE 里打字,引入可以靠 Tab 补全
    zqguo
        8
    zqguo  
       2023-03-24 08:22:43 +08:00   ❤️ 1
    改掉自己的强迫症,使用按需引用的方式
    musi
        9
    musi  
       2023-03-24 08:41:06 +08:00   ❤️ 1
    你说的这个优雅看起来不太优雅
    snowma
        10
    snowma  
       2023-03-24 08:55:14 +08:00   ❤️ 1
    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
        11
    wqzjk393  
       2023-03-24 08:57:37 +08:00 via iPhone   ❤️ 1
    看官方文档,有全局导入和自动导入两种方式
    toesbieya
        12
    toesbieya  
       2023-03-24 09:14:47 +08:00   ❤️ 2
    一群答非所问的什么意思啊
    element-plus 的 default 导出不包含 ElMessage ,而且你自己不是已经 import { ElMessage }了吗,app.config.globalProperties.$message = ElMessage 不就可以了
    Jaosn
        13
    Jaosn  
       2023-03-24 09:47:58 +08:00   ❤️ 1
    还在用 this ???
    lingxiaoli
        14
    lingxiaoli  
       2023-03-24 09:59:01 +08:00   ❤️ 1
    @toesbieya #12 这个唯一不太好用的地方是每个要用 message 的地方都要从实例属性里取, 不过这样子也比 this.强太多了
    toesbieya
        15
    toesbieya  
       2023-03-24 10:31:26 +08:00   ❤️ 1
    @lingxiaoli #14 看情况吧,要在 template 里用的比如国际化$t 这么写我觉得可以,this.主要是类型不好做,能做好啥事没有
    anguiao
        16
    anguiao  
       2023-03-24 11:01:04 +08:00   ❤️ 1
    用了 TS 就不要用 Options API 了,Composition API 里面是没有 this 的。喜欢把各种东西挂在全局上的做法也并不推荐。

    然后说回来,你的用法并没有错,只是内置的类型声明中,没有包含“$message”,所以会报类型错误。请参照文档自行添加,加了之后应该就没有问题了。
    文档链接: https://cn.vuejs.org/api/utility-types.html#componentcustomproperties
    ljpCN
        17
    ljpCN  
       2023-03-24 11:06:43 +08:00   ❤️ 1
    #12 @toesbieya 正解,不知道一群答非所问的在说什么。另外 op 非要用 `ElementPlus.ElMessage` 的话,可以试一下 `import * as ElementPlus from "element-plus";`。我猜测也许是可行的。直接用 `import ElementPlus from 'element-plus';` 只是导入了这个包的默认导出。
    ajaxgoldfish
        18
    ajaxgoldfish  
    OP
       2023-03-24 11:13:08 +08:00 via Android
    @anguiao 佬,假如已经成功挂在全局上了,那在组合式 api 中是不是照样不能用全局挂载的 this.messege ,而只能在选项式 api 中用全局挂载的 this.messege ?
    ajaxgoldfish
        19
    ajaxgoldfish  
    OP
       2023-03-24 11:14:43 +08:00 via Android
    在此谢过楼上的兄弟们了,不一一回复了
    @ljpCN
    @anguiao
    @toesbieya
    @lingxiaoli
    @Jaosn
    @toesbieya
    @wqzjk393
    @snowma
    @musi
    @zqguo
    @kdwnil
    @Shook
    @lsry
    @mxT52CRuqR6o5
    @learningman
    @lisongeee
    @renmu
    anguiao
        20
    anguiao  
       2023-03-24 11:34:17 +08:00   ❤️ 1
    @ajaxgoldfish
    没法直接访问,好像可以从 setup 的 context 参数里面取,具体的我记不清了,而且这样操作下来也并不方便。
    如果不想每个组件都引入的话,最好的办法应该是前面有人提过的,配置自动导入,而不是挂载在全局上。
    xuyang2
        21
    xuyang2  
       2023-03-24 12:44:32 +08:00   ❤️ 1
    改掉自己的陋习,使用按需引用的方式
    sjhhjx0122
        22
    sjhhjx0122  
       2023-03-24 13:57:56 +08:00
    @ajaxgoldfish 可以通过 getCurrentInstance()拿到当前组件的实例,但是按需引入你不喜欢,还是回到原点
    YouCode
        23
    YouCode  
       2023-03-24 14:31:31 +08:00
    改掉自己的强迫症,使用按需引用的方式
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2550 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 04:36 · PVG 12:36 · LAX 20:36 · JFK 23:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.