如何用 Vue.js 实现一个建站应用

需求

获取需求是开始项目的第一步。一般来说建站工具大多提供以下功能：

• 提供模板

• 主题色

• 丰富的功能模块，如图文、轮播、相册等

• 模块可以拖拽以及根据需求配置

• 支持创建多个页面的网站

• 页面可以分栏分区，有一些布局上的变化

• 网站支持手持设备

需求分析

在开始动手之前可以先分析一下需求。

从需求中可以提取到几个关键词：“模板”、“主题色”、“模块”、“页面”、“分栏” 。明确这些关键词的意义将有助于接下来的设计。

• 页面：一个网站由一个或多个页面（Page）组成。

• 分栏/分区：页面由不同的功能区组成，比如公司介绍、成功案例、联系方式等。可能是纵向排列的，也可能左右分栏排布，可以取个更恰当的名字 “区块”（Section）。

• 模块：每个区块包含一个或多个组件，这些组件组合起来达到同一个目的。例如公司介绍这个区块可以用一段文字模块介绍公司大体情况，用一个轮播模块展示公司主打产品。这里所说的模块和熟悉的 “组件”（Component）划等号，是要实现的最小功能单元。

• 模板：模板可以有很多种定义。此处可以理解为一个页面的布局，类似于 QQ 空间可以选择的分栏布局。模板定义了一个页面包含的区块数量和每个区块的横向占比。

• 主题色：每个网站都应有自己的风格。可以简单认为：风格 = 模板 + 主题色，不同的模板搭配不同的主题色形成了不同风格的网站。