在 Play Framework 应用程序中使用 Vue.js
Using Vue.js in a Play Framework Application
如果有人有使用 Vue.js 作为 Play Framework 应用程序前端的经验，我想知道推荐的方法。
我当前的设置是一个 Play 应用程序（在 Java 中），其中包含用于处理 REST 请求的模型、控制器和 DAO - 这实际上是我的后端。 Now Play 还允许您使用 Twirl 模板库来创建可作为静态 HTML 使用的视图。但是，我发现 Twirl 语法不必要地复杂并且难以为单页应用程序编写视图。我更喜欢使用更适合 UI 工作的东西，比如 Vue
我的研究显示了将 Vue 集成到 Play 中的两种选择：
使用 Webjars:
它是某种 Play 插件，将 Java 脚本库（如 JQuery 捆绑到可由 Play 部署的 .jar 文件中。坦率地说，我不明白这个过程，我不知道这如何让我在 .vue 文件中写下我的观点。
使用松散连接到 Play 后端的单独 Vue 项目：
这是我在发布此问题之前的当前展望。我想我可以使用 vue-cli 和 NPM 创建一个标准的 Vue Webpack 项目，然后我可以 RESTfully 调用 Play 后端 API。这样做的问题是单独部署后端和前端会增加额外的复杂性。我更喜欢一个 Play 应用程序（项目文件夹）中的所有内容——后端和前端。
哪一个是正确的选择？我也愿意接受新的建议。对于任何建议，请解释该方法的优点，并最好提供一个最小的工作示例（Github 回购协议就足够了）。
谢谢。
这是一个使用 Play & Vue.js 和 WebJars 的项目：https://github.com/dreamhouseapp/dreamhouse-einstein-vision
请注意，该项目尚未更新到最新的 Play。
有关使用 WebJars 和 Play 的文档位于：http://www.webjars.org/documentation
我一直在努力实现同样的目标，并且我设法找到了一些 github 带有 Play + Vue 入门项目的回购协议。 play-vue-webpack 看起来最符合我的需要。
它将后端的 Play 与前端的 webpack/webpack-dev-server 设置与 .vue 组件、热模块重新加载等相结合。webpack 服务器由 sbt run 挂钩启动，因此它是相当无缝的（尽管根据我的经验，使用 CTRL+C 停止服务器只会停止后端，我不得不单独手动停止节点进程）。
选择走哪条路很棘手。这取决于你想要达到什么。
在 GIVE.asia, we go the traditional route by making sbt-vuefy 用于在 运行 sbt run 时将 *.vue 热重载到 *.js。
您似乎很好地抓住了 SPA 的缺点；这就是我们不使用 SPA 的原因。
这里有一些关于我们如何将 Vue.js 与我们的 Playframework 集成的更多信息（例如，将数据从后端发送到 *.vue）：https://give.engineering/2018/06/05/vue-js-with-playframework.html
sbt-vuefy 中的测试项目可能还会为您提供更完整的画面。
希望对您有所帮助。
首先，我们使用了 Webpack-SBT 设置，就像@Tim Barclay (play-vue-webpack) 建议的 repo 一样，尽管使用了我们自己手工制作的 Webpack 配置文件和 SBT 挂钩……这非常耗时且需要对 Webpack 内部结构有很好的了解。
所以我们后来在原始问题中采用了选项 2：使用松散连接到 Play 后端的单独 Vue 项目。最初它确实需要更多工作，但随着代码库的增长，它比早期的耦合 2 个代码库的方法更容易理解和维护。
有几种可能的解决方案可以使其正常工作：
使用 sbt 插件。有多个 sbt 插件可以帮助 vuejs 工作。对我来说，这种方法的缺点是紧耦合。如果 vue build 中有什么变化（或者你想自定义它）或者 sbt 插件的作者停止支持，可能需要很多时间来解决这些问题。
保持前端和后端分离。您可以使用 webpack 代理 (https://webpack.js.org/configuration/dev-server/) 作为后端。这适用于您使用的任何前端库，无论您是 vuejs、angular 还是 React。
有时它需要介于 #1 和 #2 之间的选项，例如将 CSRF 令牌注入页面等。在这种情况下，您可以简单地通过 Play on DEV 模式代理前端并使用内置PROD 模式下的静态资产。对我来说，这是最灵活的解决方案。您可以查看此 https://github.com/SunPj/silhouette-vuejs-app github 项目
如果有人有使用 Vue.js 作为 Play Framework 应用程序前端的经验，我想知道推荐的方法。
我当前的设置是一个 Play 应用程序（在 Java 中），其中包含用于处理 REST 请求的模型、控制器和 DAO - 这实际上是我的后端。 Now Play 还允许您使用 Twirl 模板库来创建可作为静态 HTML 使用的视图。但是，我发现 Twirl 语法不必要地复杂并且难以为单页应用程序编写视图。我更喜欢使用更适合 UI 工作的东西，比如 Vue
我的研究显示了将 Vue 集成到 Play 中的两种选择：
使用 Webjars:
它是某种 Play 插件，将 Java 脚本库（如 JQuery 捆绑到可由 Play 部署的.jar文件中。坦率地说，我不明白这个过程，我不知道这如何让我在.vue文件中写下我的观点。使用松散连接到 Play 后端的单独 Vue 项目：
这是我在发布此问题之前的当前展望。我想我可以使用 vue-cli 和 NPM 创建一个标准的 Vue Webpack 项目，然后我可以 RESTfully 调用 Play 后端 API。这样做的问题是单独部署后端和前端会增加额外的复杂性。我更喜欢一个 Play 应用程序（项目文件夹）中的所有内容——后端和前端。
哪一个是正确的选择？我也愿意接受新的建议。对于任何建议，请解释该方法的优点，并最好提供一个最小的工作示例（Github 回购协议就足够了）。
谢谢。
这是一个使用 Play & Vue.js 和 WebJars 的项目：https://github.com/dreamhouseapp/dreamhouse-einstein-vision
请注意，该项目尚未更新到最新的 Play。
有关使用 WebJars 和 Play 的文档位于：http://www.webjars.org/documentation
我一直在努力实现同样的目标，并且我设法找到了一些 github 带有 Play + Vue 入门项目的回购协议。 play-vue-webpack 看起来最符合我的需要。
它将后端的 Play 与前端的 webpack/webpack-dev-server 设置与 .vue 组件、热模块重新加载等相结合。webpack 服务器由 sbt run 挂钩启动，因此它是相当无缝的（尽管根据我的经验，使用 CTRL+C 停止服务器只会停止后端，我不得不单独手动停止节点进程）。
选择走哪条路很棘手。这取决于你想要达到什么。
在 GIVE.asia, we go the traditional route by making sbt-vuefy 用于在 运行 sbt run 时将 *.vue 热重载到 *.js。
您似乎很好地抓住了 SPA 的缺点；这就是我们不使用 SPA 的原因。
这里有一些关于我们如何将 Vue.js 与我们的 Playframework 集成的更多信息（例如，将数据从后端发送到 *.vue）：https://give.engineering/2018/06/05/vue-js-with-playframework.html
sbt-vuefy 中的测试项目可能还会为您提供更完整的画面。
希望对您有所帮助。
首先，我们使用了 Webpack-SBT 设置，就像@Tim Barclay (play-vue-webpack) 建议的 repo 一样，尽管使用了我们自己手工制作的 Webpack 配置文件和 SBT 挂钩……这非常耗时且需要对 Webpack 内部结构有很好的了解。
所以我们后来在原始问题中采用了选项 2：使用松散连接到 Play 后端的单独 Vue 项目。最初它确实需要更多工作，但随着代码库的增长，它比早期的耦合 2 个代码库的方法更容易理解和维护。
有几种可能的解决方案可以使其正常工作：
使用 sbt 插件。有多个 sbt 插件可以帮助 vuejs 工作。对我来说，这种方法的缺点是紧耦合。如果 vue build 中有什么变化（或者你想自定义它）或者 sbt 插件的作者停止支持，可能需要很多时间来解决这些问题。
保持前端和后端分离。您可以使用 webpack 代理 (https://webpack.js.org/configuration/dev-server/) 作为后端。这适用于您使用的任何前端库，无论您是 vuejs、angular 还是 React。
有时它需要介于 #1 和 #2 之间的选项，例如将 CSRF 令牌注入页面等。在这种情况下，您可以简单地通过 Play on DEV 模式代理前端并使用内置PROD 模式下的静态资产。对我来说，这是最灵活的解决方案。您可以查看此 https://github.com/SunPj/silhouette-vuejs-app github 项目
的工作原理