1、背景

为实现前端web和wap组件的标准化以及整体项目对新人的友好。依据已有的项目抽离出公共的组件库，用以支撑以后的业务逻辑，最重要是支撑“七巧板”项目。

2、名词解释

布局组件：其他组件的容器；

通用组件：可独立业务存在的组件，偏工具类型；

业务组件：强业务属性组件，通常包含业务字典；

3、组件划分

3.1、web组件

3.1.1、布局组件

• 无头部，无底部（登录注册，观看页面）
• 仅有头部，不包含底部（某些特殊页面如学习报告）
• 包含头部，包含底部

3.1.2、通用组件

• Loading
• Toast
• 通用弹窗
• 图片预览
• 文件上传
• 倒计时
• 音频播放
• Emoji
• 面包屑
• 滚动组件
• tab
• 富文本输入框
• 星级选择
• 拖动
• 碰撞检测

3.1.2、业务组件

• 顶头部：包含基础菜单项。
• 顶部导航：包含导航项。
• 底部导航
• 右侧工具栏
• 轮播图
• 课程筛选
• 图片课程卡片
• 文字课程卡片
• 老师组合
• 日历插件：直播日历
• 空状态：列表为空
• 收货地址
• 编辑地址
• 练习题
• 播放器
• 评价弹窗

4、具体实现

4.1框架选型

第一版使用Storybook。Storybook是一个开源工具，用于独立开发React、Vue和Angular的UI组件。它能有组织和高效地构建UI组件。

4.2实现和使用

• 组件编写
• Story编写
• npm组件发布
• 组件预览发布
• 浏览组件，查看组件文档
• 组件安装到项目，并使用

4.3.预览界面

前端 > 前端组件库 > image2020-7-31_11-3-36.png

4.4 项目目录

.storybook  storybook 的配置文件
|-----main.js 

public 公开资源目录
|-----index.html

src 项目源代码
|-----assets
|-----components # 组件库
|-----layouts # 布局组件
|----------error
|--------------no-header.vue
|--------------no-header.stories.js
|-----basic # 基础组件
|-----composite # 业务组件
|-----lib # 项目库
|-----App.vue
|-----main.js 

... (assets,App.vue,main.js...等均为vue-cli创建的，用来跳过storybook过程，直接运行项目)

package.json 
.eslintrc.js
.gitignore
README.md

4.5 web组件开发

clone项目

git clone [email protected]:xthk-web/online_edu_web_component.git

安装依赖

npm install # 或者
yarn

启动storybook

npm run storybook

以下步骤需要master管理员完成

编译组件

npm run lib

发布组件

npm publish