[問題] django and vuejs

[kiloxx (名器)]

大家好，
我根據下面連結的文章，建立的django backend 跟 vue frontend
http://bit.ly/2UY1Odz

我在backend的app.html寫以下block

<div class="container mt-3">

  <div id="app">
       <app :data="data_to_render"></app>
   </div>

</div>

然後在frontend 的main.js寫
import App from "App.vue"
new Vue({
        el: "#app",
        components: {
                app:App,
        },
        data: function () {
                return data_to_render
        },
       });

可以成功的render到backend app.html上

但是問題是，我不想寫在main.js裡面

我想把上面寫在frontend main.js裡面的內容，
改寫到backend的app.js裡面

{% block javascript %}
  {% render_bundle 'app' %}
  <script src="{% static 'backend/app.js' %}"></script>
{% endblock %}

我試著把一樣在main.js的code砍掉，改貼過去app.js但是沒有用

腦中也沒有好的關鍵字，google不到答案

我要怎麼寫修改main.js，

我才可以把我上面main.js寫的內容，改放到app.js裡面?

謝謝!!



//--- 目前的解法

用下面的package打包我的components到dist/static/js/app.js
https://github.com/team-innovation/vue-sfc-rollup
然後用django setting STATICFILES_DIR連過去

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.137.95.239
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1556800962.A.B83.html
推 sa0124: 要在server side nue vue!? 我以為這要後端也在js環境才可
→ sa0124: 以辦到
推 sa0124: *new vue 字打錯了
→ kiloxx: 我在backend也有加vuejs的CDN
→ hsuallan: 後端渲染的話應該是ssr吧 vue可用nuxt.js來做
→ kiloxx: 亂google後，好像要用npm build然後拿dist/js/app.js來用.
※ 編輯: kiloxx (220.137.95.239), 05/04/2019 01:17:36
推 windclara: https://zhuanlan.zhihu.com/p/25080236 我當初用這篇
→ windclara: 現成的模板有試做成功且順利部署到Heroku。看你要不要
→ windclara: 直接用這個來做
→ windclara: 其實這樣規畫就算是前後端分離了，配合DRF效果更佳