功能整理：

店铺装修移动化目前需求主要是以下几个：

• 模拟手机端预览装修效果
• 拖拽装修模块进预览处
• 对模块进行布局顺序修改（上移下移删除等）
• 对模块进行属性修改
• 装修备份功能（即读取指定数据并在预览处展示指定效果）

其中模块属性修改，相对比较复杂，主要包含几个功能:

• 根据需求上传指定格式的图片
• 裁剪图片（每个模块都有指定的尺寸）
• 链接选择小工具（弹窗形式，选择已有的链接并填充到表单中）
• 服务选择 （弹窗形式，选择已有的服务，并填充到表单中）
• 案例选择 （弹窗形式，选择已有的案例，并填充到表单中）

前提：

参考淘宝的移动店铺装修功能，只支持Chrome和UC浏览器，所以经过产品同意，可以不考虑兼容性的问题，也意味着可以选择更多。

开发周期：

约两周

选型：

手机端预览效果

因为这个项目功能比较独立，所以迁入fis项目进行构建。同时考虑到涉及交互还比较多，所以参考使用框架来帮助我们更好的完成开发。考虑开发周期，经过初步筛选，决定入坑Vuejs。

我们这里使用这个框架主要是拿它来实现需求中手机端的预览效果：把手机端预览中的每个模块都当成component进行组装，通过改变数据来控制展示（拖拽功能即多塞了一条数据，改变属性就相当于改变其中一个数据）。

备份

备份功能也可以使用预览的相同机制实现。

表单功能

至于表单部分功能比较多，可能还是要使用现有的组件来完成部分功能（如选择服务）。

扩展

以后扩展其他模块的话，其实也就相当于多注册几个component，扩展起来比较随意，也比较独立。

其他问题

• Vuejs的文档相对比较友好，容错度也较高，入手使用并不会那么痛苦（就算日后有人接手也相对来说不会那么无从着手）。
• Vuejs本身组件并不丰富。Github上实用的组件也就是vue-crop(包装的jCrop)和vue-validator。 但是经过测试其实也可以使用其他组件，如rake中正在使用的弹窗组件，如拖拽使用的Sortable插件。这些都可以在测试中正常使用。