#rickgao/ui/vue #frontend/storybook #frontend/lerna #frontend/vue

背景

活动站点架构

活动站点：

• 多活动、单一项目
• H5，混合开发
• 多页面架构
• Vue+webpack

架构示意图：

开发痛点

缺失通用组件

当我接到这个需求的时候，我的理解是我调用一个popup组件就好了，结果整个项目中没有Popup组件；

作为一个前端无底洞、萌新、切图仔的我

问了下别人怎么开发的这个需求，答复是

• 自己写一个，很简单的，就几个样式而已
• 这个XXX项目有，但是也业务耦合很严重，你还是自己写吧
• 。。。。

然后，我就只能自己去实现，结果是

• 排期怎么那么长
• 。。。

场景多、前置条件复杂

项目的开发中，进入到某个场景展示特定的页面有许多前置的条件，如在开发赏金联盟，需求仅是同步线上线下步骤条的状态

需求看起来应该很简单，但是实际开发上却耗费过多时间

• 进入特定的场景（前置条件多）
  • URL上的数据
  • API数据
  • API数据可能经过某个环节加工
  • 。。。

解决方案探索

引入第三方组件库（排除）

在没写活动前，我刚好搭建了一个H5的站点：【架构】mopen管理平台架构及开发规范；

就是使用vant组件库。

但是这种方式并不符合需求，前面一个活动架构图中，我们已经知道了，一个活动站点里存在过多的主题，不同的活动。引入一个第三方的组件库通过主题色的修改过于复杂，成本真的比自己写还高。

自建组件库（不得已为之）

一般说到自建组件库，大家都会说是重复造轮子，KPI等等。

但是经上分析自建组件库来提高开发效率是在活动站点的背景下是不得以为之；

目标

• 组件文档、方便使用

• 持续沉淀、不重复造轮子

• 多主题、适配多活动

• NPM包（版本号）、跨项目共享及活动隔离

• 组件驱动开发

方案

组件库架构：

Storybook

多主题架构

组件编写

区别点就是样式的只在inex.js里引入，在Vue文件中并不直接使用样式文件

使用方式

通过 lerna 在每个活动下引入特定版本号的组件，然后复制一份样式文件

截图的这里是没走lernad的

文档书写

直接在对应的prop上写注释就可以了

Lerna

等我有时间了再专门写一篇介绍这个的

Lerna自带了上传及版本号等等等等等，具体的逻辑就是直接把包的源码上传到对应的npm上，用户install下来的是一个没有走编译的纯Vue文件，就像是copy了一个文件夹过来。

当然，你也可以设置成单个打包，获取全部统一打包之类的，那就和使用第三方组件库差不多了

CI/CD

这个根据公司里用啥，使用对应的就可以了

搭建过程（略）