将VueJS添加到现有的Angular应用程序中

Question

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

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

我想要改变其中一个状态以使用vue，所以我读到可以通过以下方式实现：https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9 然而，我想使用.vue文件语法，不知道是否可能在未使用webpack或任何其他打包工具的情况下实现。

所以我的问题是 - 是否可能？ 我能否在当前配置中在我的ng应用程序中使用.vue文件？ 此外，是否有一种很好的方法只对vue文件和组件进行webpack（即使我似乎必须在angular控制器中初始化它们）。

如果有任何添加vue到angular应用程序的好教程，我会很高兴得到它们，因为我找不到好的教程。

谢谢

- Rotem B

---

.vue文件是由vue-loader使用的一种格式，它是专门为webpack设计的npm包。因此，如果您想使用.vue文件，我非常确定您需要webpack。 - thanksd

Answer 1

ngVue成员在这里 :)

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

- Nicolas P.

Answer 2

这可能比较困难，因为vue代码的构建基本上会成为一个独立的应用程序。

您可以尝试完全构建两个不同的并行应用程序，使用两个构建步骤，包括两个JavaScript文件，然后使用window.postMessage在两者之间进行通信。

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

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

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

- justin.m.chase

---

我必须说，我有点喜欢这个想法。这也给了我一些关于我们迁移项目的灵感！ - Dieterg

谢谢Justin！有两个问题 - 首先，你会这样做吗？你会尝试将Vue添加到一个已经存在且相当大的Angular应用程序中吗？其次，你对ngVue有什么想法？ - Rotem B

我完全没有研究过ngVue，但如果有人已经为你做了一些工作，那么不妨去看看。至于是否要这样做...似乎有风险，我可能宁愿不这样做，但如果你想不出更好的方法来推动远离旧版Angular，我会非常心动。 - justin.m.chase