Vue 2.0 auf multipage app

Question

Ich habe gerade angefangen, auf Vue stolperte über eine Frage über Architektur in Multipage-App, die ich nirgends eine Antwort finden konnte.

Ich baue eine Web-Anwendung auf Umbraco CMS und nur Teile des Codes auf den verschiedenen Seiten sind Vue-Code. Dazwischen gibt es auch viele normale cms Ausgabe, die nicht durch vue, beispielsweise wiedergegeben wird:

  <div class="description"> 
      @Html.Raw(Model.Description) 
     </div> 
     <div class="specifications product-onpage-link"> 
      <a href="#description" class="first-link" onclick="event.preventDefault(); productScroll('#description')">Se varebeskrivelsen</a> <a href="#specifications" onclick="event.preventDefault(); productScroll('#specifications')">Se tekniske specifikationer</a> 
     </div> 

     @Html.Partial("~/Views/Partials/Webshop/Products/Variant.cshtml", Model) 

     @{ 
      var amountvalues = Model.StockInfo != null && Model.StockInfo.AmountValues != null ? Json.Encode(Model.StockInfo.AmountValues) : ""; 
     } 

     <div id="add-to-basket" class="variant box rounded-borders"> 
      <add-to-basket amountplaceholder="@Umbraco.GetDictionaryValue("Products: amount name")" id="@Model.ItemNo" orderminimum="@Model.StockInfo.OrderMinimum" amountvalues="@amountvalues" placeholder="@Umbraco.GetDictionaryValue("Products: Add to basket button name")" nicename="@Model.StockInfo.Stock.NiceName" delivery="@Model.StockInfo.DeliveryTime" orderinterval="@(Model.StockInfo.OrderInterval == 0 ? 1 : Model.StockInfo.OrderInterval)" /> 
     </div> 
    </div> 

In diesem Teil, es ist nur das Element, das durch vue gemacht wird.

Meine Frage ist, wie man den Vue-Code strukturiert, wenn es viele Vue-Instanzen auf der gleichen Seite mit viel normalem cms gerenderten Code dazwischen geben könnte.

Mein Einstiegspunkt für den vue-Code ist

import productComponent from './product-overview'; 
import BuyButton from './shared/buy-button'; 

Vue.component('buy-button', BuyButton); 

new Vue({ 
    el: '#add-to-basket' 
}); 

new Vue({ 
    el: '.buytogether' 
}); 

... 

Hier ist erzeugen tatsächlich eine Menge vue Instanzen. Ich denke, da muss es einen einfacheren Weg geben.

Ich kann nicht alle Vue-Code in einer Vue-App mit einer Eltern/Kind-Beziehung zwischen den Komponenten verarbeiten, weil sie auf der Seite mit viel normalem html dazwischen verteilt sind, die vom Server gerendert wird .

Meine Angst ist, dass wenn ich mehrere Vue-Instanzen erstellen, ich Leistung verlieren werde.

Ich hoffe, Sie haben einige gute Ideen, um den Code zu strukturieren.

Answer 1

Ich bin mir ziemlich sicher, dass der beste Weg wäre, einen einzigen Vue-Eingang zu haben. Beziehungen können durch Requisiten gehandhabt werden, wenn sie nicht zu komplex sind, und wenn sie es sind, mit vuex.

Obwohl Sie keine einzelne Seiten-App haben, wird der Status zwischen den Seiten nur dann freigegeben, wenn Sie Sitzung, lokalen Speicher oder eine Datenbank verwenden.