将 vueJS 添加到现有的 Angular 应用程序中答案

【问题标题】：Adding vueJS into an existing angular application将 vueJS 添加到现有的 Angular 应用程序中
【发布时间】：2017-10-30 14:31:25
【问题描述】：

我有一个现有的 Angular 应用程序，我想开始将其中的一些更改为 vueJS 应用程序。

我的应用程序在开发模式下加载主 html 文件中的所有脚本（在生产模式下它捆绑到 app.js 中，但我想开始测试到开发模式）。

我想更改状态以使用 vue，所以我可以通过以下方式阅读：https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9

但是，我想使用 .vue 文件语法，我不知道在开发模式下不使用 webpack 或任何其他捆绑程序是否可行。

所以我的问题是 - 这可能吗？我可以在我的 ng 应用程序中使用当前配置的 .vue 文件吗？此外，是否有一种仅 webpack 仅 vue 文件和组件的好方法（即使我必须在内部初始化它们和看起来的角度控制器）。

如果有任何关于在 Angular 应用中添加 vue 的好教程，我很想得到它们，因为我找不到好的教程。

谢谢

【问题讨论】：

.vue 文件是 vue-loader 使用的格式，这是一个专门为 webpack 设计的 npm 包。所以，如果你想使用 .vue 文件，我很确定你需要 webpack。

标签： angularjs vuejs2

【解决方案1】：

ngVue 成员在这里 :)

在 Dawex（我工作的公司），我们在一个大型 AngularJS 应用程序中使用 Vue，ngVue。它已经生产了几个月，效果很好。您可以在我去年夏天之前写的这篇文章中找到更多信息：https://medium.com/dailyjs/how-to-migrate-from-angularjs-to-vue-4a1e9721bea8。希望对您有所帮助！

【讨论】：

【解决方案2】：

这可能很难，因为 vue 代码的构建基本上是一个单独的应用程序。

您可以做的一件事是将它们构建为完全不同的并行应用程序，使用两个构建步骤，包含两个 javscript 文件，然后使用window.postMessage 在两者之间进行通信。

因此，例如，您当前的应用程序将达到特定div 包含 vue 代码而不是 angular 的地步。然后，您可以从您的 Angular 代码中发布一条消息，告诉 vue 应用程序加载到该 div 中，例如：

window.postMessage({ app: 'vue', bind: '#vue-content' })

vue 应用程序不会绑定DOMContentReady，而是会监听窗口事件，然后绑定到它接收到的元素。然后它还会通过发布消息与主机应用程序进行通信。这将使它们保持相当独立，并允许您独立构建它们。

【讨论】：

我必须说，我有点喜欢这个主意。在我们的迁移项目上也给了我一些灵感！
谢谢贾斯汀！两个问题——首先，你会这样做吗？您会尝试将 vue 添加到现有且相当大的 Angular 应用程序中吗？二、对 ngVue 有什么想法吗？
我根本没有看过 ngVue，但如果有人已经为你做了一些工作，不妨看看。关于这样做......这似乎很冒险，我可能宁愿不这样做，但如果你想不出更好的方法来摆脱旧的角度，而不是我会非常想。