2017-10-11 85 views
1

如果任何人有使用Vue.js作为一个播放框架应用前端的经验,我想知道的推荐方法。在游戏框架应用程序中使用Vue.js

我目前的设置是一个Play应用程序(使用Java),模型,控制器和DAO用于处理REST请求 - 这实际上是我的后端。现在Play也可以让你使用Twirl模板库来创建可以用作静态HTML的视图。但是,我发现Twirl语法无需复杂,很难为单页面应用程序构建视图。我宁愿用更多的东西微调的UI工作像Vue公司

我的研究表明整合Vue的播放两种选择:

  1. 使用Webjars
    其某种播放插件,将诸如JQuery之类的JavaScript库捆绑到可由Play部署的.jar文件中。坦率地说,我不明白这个过程,我不知道这将如何让我在.vue文件中写下我的观点。

  2. 使用松散地连接到播放后端的独立Vue公司的项目:
    这是发布这个问题之前,我目前的前景。我想我可以使用vue-cliNPM创建一个标准Vue Webpack项目,然后我可以以REST方式调用Play后端API。与此相关的问题是单独部署后端和前端的额外复杂性。我更喜欢一个Play应用程序(项目文件夹)中的所有内容 - 后端和前端。

哪一个是要走的路?我也接受新的建议。对于任何建议,请解释该方法的优点,并最好提供一个最小的工作示例(Github回购就足够了)。

谢谢。

+0

您可以设置sbt任务来构建您的vue项目并将文件复制到资产文件夹 – cutoffurmind

回答

1

下面是一个使用播放& Vue.js与WebJars项目:https://github.com/dreamhouseapp/dreamhouse-einstein-vision

注意该项目尚未更新到最新的播放。使用WebJars和播放

文件是在:http://www.webjars.org/documentation

+0

感谢您的链接,但是,它没有解决我关于使用Webjars的问题 - 如何使用此设置在.vue文件中使用组件?您提供的回购仅显示index.scala.html文件中的Vue组件(破坏模块化的整个目标)。 – eyeezzi

+0

它看起来像'.vue'文件需要Webpack或Browserify来转换/加载它们。这些工具仅适用于Node。所以除非有人为他们创建了一个sbt插件,否则你将无法使用Play /其他基于sbt的工具。 –

+0

您可以在您的根项目下创建vue子项目,并像使用纯节点/ webpack项目一样工作,向后端代理请求,然后在将整个播放项目构建到公用文件夹中某处目标文件夹之前构建vue项目。这就是为什么你需要SPA,但是如果你只有vue的一部分界面,就没有办法让它像那样工作(我想只有webjars) – cutoffurmind

0

我一直在试图达到同样的事情,我已经成功地找到播放+ Vue的启动项目数的github回购。 play-vue-webpack看起来最适合我的需求。

它结合在后台播放用的WebPack /的WebPack-DEV-服务器设置在前端与.vue部件,热模块重装等的WebPack服务器由sbt run钩开始,所以这是相当无缝(虽然我经验,用CTRL + C停止服务器只会停止后端,我不得不单独手动停止节点进程)。