Vue3里的main.js报错

### 解决Vue3中Prototype相关报错的方法 在Vue2向Vue3迁移过程中，由于API的变化以及内部实现机制的不同，可能会遇到一些原本基于`Vue.prototype`扩展的功能无法正常工作的情况。在Vue2中，开发者可以通过修改`Vue.prototype`来全局注册方法或属性，在任何组件实例中都可以访问这些定义的内容[^1]。 然而，在Vue3里，这种做法不再适用，因为Vue3移除了对`Vue.prototype`的支持。为了实现在所有组件间共享逻辑或者功能的目的，推荐采用组合式API(composition API)中的提供/注入(provide/inject)[^2] 或者使用插件的方式引入公共工具函数和服务： #### 使用Provide/Inject模式 这是一种父子组件之间传递数据的有效方式。父组件可以作为提供方，子组件则是接收方。这种方式不仅限于基本类型的传递，还可以用来分发整个模块、服务类等复杂结构的对象给后代组件们使用。 ```javascript // 父组件 ParentComponent.vue export default { setup() { const sharedMethod = () => console.log('Shared Method Called'); provide('sharedMethod', sharedMethod); return {}; } } ``` 对于需要使用的子组件来说，则只需要简单声明即可获取到这个被提供的资源: ```javascript // 子组件 ChildComponent.vue import { inject } from 'vue'; export default { setup() { const sharedMethod = inject('sharedMethod'); // Now you can use `sharedMethod()` here. return { sharedMethod }; } } ``` #### 创建并安装Plugin 如果希望更广泛地应用某些特性而不局限于特定层次关系内的组件交流的话，那么构建一个自定义插件可能是更好的选择。这允许在整个应用程序范围内轻松集成第三方库或者其他通用业务逻辑。 创建一个新的文件比如叫my-plugin.js, 并按照如下形式编写代码: ```javascript const MyPlugin = { install(app){ app.config.globalProperties.$customFunction = function(){ alert("This is a custom global method."); }; // Optionally add to properties that will be available on every component instance's context object ($attrs, $listeners etc.) app.provide('$customService', someCustomServiceInstance); } }; ``` 接着在main.js(main.ts) 中导入此插件并调用app.use(MyPlugin)，这样就能让所有的单文件组件都能方便快捷地获得新添加的能力了。 通过上述两种途径之一，可以在不依赖已废弃特性的前提下完成相同的需求满足，并且更加符合现代前端开发的最佳实践标准。