1
私はVueを始めたばかりで、マルチページアプリケーションのアーキテクチャに関する質問に遭遇しました。私はどこにでも答えを見つけることができませんでした。マルチページアプリケーションのVue 2.0
私はumbra cmsに基づいてWebアプリケーションを構築しており、さまざまなページのコードの一部だけがvueコードです。
<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>
ことがVUEを通じてレンダリングされ、それが唯一の要素ですが、この部分では：の間では、VUE、例を通じてレンダリングされていない通常のCMS出力の多くは、もあります。
私の質問は、複数のvueインスタンスが同じページにあり、その間に多数のレギュラーCMSレンダリングされたコードがある場合、どのようにvueコードを構成するかです。 VUEコードの
私のエントリポイントはここ
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'
});
...
私は実際にVUEのインスタンスの多くを生成しています。私は考えている、これに簡単な方法が必要です。
コンポーネント間に親子関係がある1つのvue-app内のすべてのvueコードを扱うことはできません。その理由は、それらがサーバーのレンダリングされる多数の通常のhtmlでページに広がっているからです。
私が恐れているのは、複数のvueインスタンスを作成するとパフォーマンスが低下するということです。
あなたはコードをどのように構造化するか、いくつかの良いアイデアがあるといいですね。