Vue 2.0在多页应用上

我刚刚开始在Vue上偶然发现关于多页应用架构的问题，我一直无法在任何地方找到答案。Vue 2.0在多页应用上

我正在构建一个基于umbraco cms的web应用程序，并且只有部分代码在各个页面上都是vue代码。在这两者之间，也就是很多正常的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代码，当在同一页面上可能有许多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实例时，我会失去表现。

希望你有一些好的想法，如何构建代码。

来源

2017-04-12 Martin Kure

我很确定最好的方法是有一个单一的vue intance。关系可以通过道具来处理，如果它们不是太复杂的话，可以用vuex来处理。

虽然由于您没有单页应用程序，除非您使用会话，本地存储或数据库，否则不会在页面之间共享状态。

来源

2018-01-29 13:11:04

Vue 2.0在多页应用上

回答

相关问题