VueJs3 Cli项目，如何附加全局服务方法

Question

我最近下载了一个开发者Modal Dialog。他的代码被设计和描述为对现有项目的补充。（换句话说，他没有修改原来的main.js文件...我不明白这是对还是错的做法。）

在我的代码中，Vue 和 createApp 是在 main.js 创建项目时创建的。在模态对话框代码中，开发人员并没有通过创建 CLI 项目来开始创建他的项目，而是作为一个简单的独立项目（无 CLI）。正如您在下面看到的，模态的开发人员引入了一个全局服务，他似乎在其中重新定义了 Vue 并添加了一个方法“open”，其中 returns 一个 Promise。

按照文档将模态添加到我的项目后，我得到一个指向 modal.service.js 文件的错误，该文件在第 2 行显示“TypeError：默认不是构造函数”，它似乎正在破坏 webpack .

我假设模式对话框 tutorial/sample 代码和我的项目之间的唯一区别是开发人员没有从创建 CLI 项目开始。

在 CLI 项目中，如何在功能上基本相同，向“app”添加一个可以从项目中的任何组件调用的全局方法？

这是我的 CLI main.js 文件：

import { createApp, reactive, computed, VueElement } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/styles.css'

const app = createApp(App)
app.use(router)
app.mount('#app')

这是在第二行产生错误的 modal.service.js 文件：

import Vue from 'vue';
export default new Vue({
methods: {
  open(component, props = {}) {
    return new Promise((resolve, reject) => {
      this.$emit('open', { component, props, resolve, reject });
    });
  }
}
})

然后在调用服务方法的开发人员 ModalRoot.vue 文件中存在以下代码：

import ModalService from '../services/modal.service';
import Modal from '../components/Modal.vue';

export default {
  components: { Modal },
  data() {
    return {
      modal: {},
    }
  },
  created() {
    ModalService.$on('open', ({ component, props, resolve, reject }) => {
      this.modal = {
        component,
        props,
        close: value => {
          this.modal = {};
          resolve(value);
        },
        dismiss: reason => {
          this.modal = {};
          reject(reason);
        },
      };
    });
  }
}

将全局方法添加到 Vue CLI 项目的正确方法是什么，例如这位开发人员在他的 modal.service.js 文件中所做的？

提前感谢任何可以向我展示如何向我的项目添加所需功能的人。

Answer 1

尝试创建一个单独的应用程序，严格按照教程进行操作，看看它是否有效。如果是，请在您自己的应用程序中使用学到的信息

Answer 2

我选择使用的 Modal Dialog 似乎使用了为 Vue 2 定义的语法，并且与 Vue 3 不兼容。

查看有关从 Vue2 迁移到 Vue3 的官方 Vuejs.org 网站，我发现 $on 如上面的 ModalRoot.vue 清单所示，是一个已从 Vue3 中删除的功能。（向下滚动到有关“重大更改”的部分。）

虽然我不是 Vue3 专家，也从未在 Vue2 工作过，但现在很清楚，我需要寻找另一个模态对话框解决方案或从头开始编写自己的解决方案。

VueJs3 Cli项目，如何附加全局服务方法

VueJs3 Cli project, how to append global service methods

vuejs3