TL;DR

Puneți eticheta <script> la sfârșitul <body> sau creați o instanță Vue după ce nodul țintă este gata de apel invers.

fundal

În timp ce testam integrarea ZenUML la nivel local, am observat un lucru (nu atât de interesant). Componenta Vue nu este înlocuită (vezi mai jos).

Apoi am depanat codul și am observat că atunci când JS se execută, corpul nu este încă gata. Deoarece corpul nu este pregătit, VueJ-urile nu vor putea găsi nodul țintă de înlocuit și, prin urmare, au eșuat.

Soluţie

Pune eticheta <script> la sfârșit. Sau lăsați eticheta <script>în secțiunea ‹header>și invocați inițierea instanței Vue la sfârșit.

<body>
<main id="demo">
  <seq-diagram></seq-diagram>
</main>
<script>
  window.app = new Vue({
    el: '#demo',
    store
  })
</script>
</body>

Discuţie

Acest lucru funcționează diferit de AngularJs. În AngularJs, cadrul va aștepta ca DOM-ul să fie gata pentru a începe randarea (supra-simplificat). VueJs este un cadru mai puțin intruziv și face mai puțină magie. Așa că trebuie să te descurci singur.