摘要：近几年前端技术发展势头迅猛，web 前端项目的工程化和组件化逐渐成为前端开发者重点关注的领域，为了解决前端开发过程中代码重用性低、可扩展性差、不易维护等问题，进一步提高开发效率,使用框架和组件库开发就成了大部分开发者的首选，需要开发一套组件库适应前端开发中常有的业务需求，同时，为了组件库的使用范围更广，需要对整个组件库的自定义个性化能力进行提高。

本文从现今前端开发面临的痛点内容出发，为了进一步提高开发效率，提高完成一个业务组件从开发到管理闭环的速度，对组件库进行了表单自动生成系统的开发和其它业务组件的开发，研究组件自动生成能力对开发效率的提升。本文描述了每个组件的具体表现形式，给出了每个组件提供给前端开发人员的 API，并详细阐述了表单组件作为核心，与其它业务组件能够进行的联系，在提高开发者开发效率的道路上进行探索。

本文详细介绍了如何通过Vue 框架结合Jsx 开发模式开发一个适应业务需求的前端组件库，项目会通过 JSONSchema 数据的层级关系，自动生成用户所需的表单。并同时对表单的拓展能力进行探索，给表单组件提供主题系统，这样表单就能够不仅是常规意义上的表单，也能成为一个管理组件，同时会提供 UI 能力、数据校验能力、数据提取能力让开发者能够充分减少对于一些耗时且常规的工作的开发时间，专注于自身特殊的业务点，对组件进行自定义改变。

 

关键词：工程化；组件化；可扩展性；开发效率；表单

 

 

目录

摘要

Abstract

第 1 章 绪 论 1

1.1项目背景与意义 1

1.2论文结构 2

第 2 章 需求分析 3

2.1技术选型 3

2.1.1语言选择 3

2.1.2框架选择 3

2.1.3语法选择 4

2.2功能性需求 5

2.2.1表单功能 5

2.2.2轮播功能 7

2.2.3挽回弹窗功能 7

2.3非功能性需求 8

2.4测试需求 8

2.5本章小结 9

第 3 章 项目设计 11

3.1项目环境搭建介绍 11

3.2项目结构设计 11

3.2.1项目工程文件结构 12

3.2.2项目组织逻辑结构 13

3.2.3项目功能结构 14

3.3组件设计 15

3.3.1组件设计原则 15

3.3.2表单组件设计 17

3.3.3轮播组件设计 19

3.3.4挽留弹窗组件设计 19

3.4本章小结 20

第 4 章 项目实现 21

4.1开发环境搭建实现 21

4.2组件实现 23

4.2.1表单实现 23

4.2.2轮播实现 27

4.2.3挽留弹窗实现 30

4.3项目测试 31

4.3.1功能测试 31

4.3.2单元测试 32

4.4本章小结 33

第 5 章 项目总结与展望 34

致 谢 35

参考文献 36