Vue全家桶实践项目总结(推荐)(2)

适用场景

经过跟jQuery的对比之后，Vue的适用场景就很明显了，从开发角度讲交互越复杂的项目越适合，单页面最适合，内容类网站最不适合，如果网站中个别页面有需求也可以局部使用，例如购物车页面。

当然，这一切都要建立在不兼容IE8的前提下，对于这一点我有点疑惑，因为见到有些2C的站点都在使用Vue，这些前端er是怎么把老板忽悠瘸的？

项目分析

项目背景

这次重构的项目是为上一家公司开发的前端组件管理系统，选择重构这个项目是因为对需求比较熟悉，这是一个典型的单页面应用，而且复杂度适中，比较适合用作上手练习。

项目背景是外包类建站公司里，设计环节沉淀了大量可复用组件，设计师往往只需要微调组件就拼凑出页面，交付给前端，理论上这些组件在前端也可以复用，但实际上前端每次都要重新实现整个页面，浪费很多人力。

功能需求

这个项目的思路是，将所有组件开发出来，统一录入到一个平台上管理，设计师可以到平台上挑选组件，并实时预览和调整组件，整个过程所见即所得，平台会将调整结果生成一串代码，只要将代码交给前端，就可以用这串代码在平台上重现设计师修改后的组件，并能一键复制组件的html/css/js代码，快速应用到项目中去，使组件部分的前端开发成本接近于零。平台需要实现以下几个功能：

1. 管理组件，支持分类、搜索、排序
2. 展示组件，支持组件在线预览/编辑
3. 组件交接，支持生成组件代码和基于代码重现组件
4. 使用统计，支持统计组件的使用情况，便于进一步优化组件

功能分析

第一版是用jQuery+template实现的，这个技术栈太灵活了，优点是什么需求都好做，缺点是怎么做都行，不利于理清思路，往往伴随着边做边改。

组件被统一放在一个widgets/文件夹里，被称作组件库，因为是纯前端项目没有文件操作能力，因此组件的读取依赖一个静态json文件，这个文件充当组件库的目录，其中包括组件分类、标签、名称、日期等所有信息，数据结构大概是这样：

[{
 "title": "导航类",
 "list": [{
 "widget": "bread-1",
 "title": "图标面包屑",
 "tag": "面包屑/图标",
 "author": "UI",
 "date": "2015-06-04"
 }, 
 ...]
},
...]

组件在组件库中以栏目/编号二级文件夹的形式存放，同时约定用存放目录作为组件代号，例如组件bread-1意味着该组件存放地址是widgets/bread/1/文件夹。

当然组件的内部文件结构也必须约定下来，如下：

widgets
  |-bread
    |-1
      |-album.jpg   //缩略图
      |-config.json  //配置文件
      |-script.js   //脚本模板
      |-style.css   //样式模板
      `-temp.htm   //界面模板