1
방금 전에 Vue에서 다중 페이지 응용 프로그램의 아키텍처에 관한 질문을 접했습니다. 어디서나 답변을 찾을 수 없었습니다.다중 페이지 응용 프로그램의 Vue 2.0
나는 umbra cms를 기반으로 웹 응용 프로그램을 만들고 있으며 다양한 페이지의 코드 부분 만이 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 코드를 구성하는 방법입니다. 많은 vue 인스턴스가 같은 페이지에 있고 그 사이에 많은 정규 cms 렌더링 코드가있을 수 있습니다. 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 경우가 많이 발생합니다. 나는 이것에 더 쉬운 방법이 있어야한다고 생각하고있다.
구성 요소 사이에 부모/자식 관계가있는 하나의 vue-app에서 모든 vue 코드를 처리 할 수 없습니다. 그 이유는 구성 요소 사이에 정규 HTML이 많은 페이지 주위로 퍼져 있기 때문입니다 .
여러 개의 vue 인스턴스를 만들면 성능이 느려질 것이라는 두려움이 있습니다.
당신은 코드를 구조화하는 데 좋은 아이디어가 있기를 바랍니다.