vue实战-模版建站实现思路

前言

随着电商的不断发展，固定的单一页面早已满足不了运营的日常需求。这个时候就需要开发一个功能来赋能运营“随意”搭配一些个性页面。我们把这个功能叫作模版建站。

展示

首先我们来看看别人是怎么做的。

1、有赞的截图：

2、微盟的截图：

可以看到有赞和微盟的实现基本上是一样的只不过在操作方式和界面风格上有点差异。

分析实现

接下来我们一起分析一下如何去实现这个功能。

可以看到我们可以把页面简单划分成两大区域：左（预览+组件列表）、右（编辑）。
接下来可以先把简单框架搭建起来。

<template>
  <div class="home">
    <div class="left">
      <div class="preview">
        <!--预览-->
      </div>
      <div class="buttons">
        <!--组件列表-->
      </div>
    </div>

    <div class="right">
        <!--编辑-->
    </div>
  </div>
</template>

接下来我们再来看看组件怎么去实现

可以看到左侧预览列表是由多个组件组成的，点击预览区域的某一个组件右侧就会显示对应的组件编辑功能。我们可以把组件进行分类，然后每个类型的组件都各自去实现一套预览(展示数据)和编辑（修改数据）的功能就可以了。
然后再来调整一下我们的代码：

<template>
  <div class="home">
    <div class="left">
      <d