在 Play 框架应用程序中使用 Vue.js

Question

如果有人有使用Vue.js作为Play Framework应用程序前端的经验，我想知道推荐的方法。

我当前的设置是一个 Play 应用程序（在 Java 中），带有用于处理 REST 请求的模型、控制器和 DAO - 这实际上是我的后端。Now Play 还允许您使用Twirl模板库来创建可用作静态 HTML 的视图。然而，我发现 Twirl 语法不必要地复杂且难以为单页应用程序组合视图。我更喜欢使用像 Vue 这样的 UI 工作更精细的东西

我的研究显示了将 Vue 集成到 Play 的两种选择：

1. 使用Webjars：
   它是某种 Play 插件，可将JQuery等 JavaScript 库捆绑到.jar可由 Play 部署的文件中。坦率地说，我不明白这个过程，我不知道这将如何让我在.vue文件中写入我的视图。

2. 使用与 Play 后端松散连接的单独 Vue 项目：
   这是我在发布此问题之前的当前展望。我想我可以使用vue-cli和NPM创建一个标准的 Vue Webpack项目，然后我可以以 RESTful 方式调用 Play 后端 API。这样做的问题是单独部署后端和前端的额外复杂性。我更喜欢一个 Play 应用程序（项目文件夹）中的所有内容——后端和前端。

其中哪一个是要走的路？我也乐于接受新的建议。对于任何建议，请解释该方法的优点，最好提供一个最小的工作示例（Github 存储库就足够了）。

谢谢。

Answer 1

首先，我们使用了 Webpack-SBT 设置，例如 @Tim Barclay ( play-vue-webpack ) 建议的存储库，尽管使用我们自己手工制作的 Webpack 配置文件和 SBT 挂钩...这非常耗时，并且需要对 Webpack 有很好的了解内部结构。

因此，我们后来在最初的问题中选择了选项 2 ：使用松散连接到 Play 后端的单独 Vue 项目。最初确实需要更多工作，但随着代码库的增长，它比早期耦合两个代码库的方法更容易理解和维护。