2017-10-11 84 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停止服務器只會停止後端,我不得不單獨手動停止節點進程)。