[发明专利]一种通用的前端UI组件库的设计和构建方法

权利要求书

1.一种通用的前端UI组件库的设计和构建方法，其特征在于，该方法包括如下步骤：

S1、搭建前端脚手架

前端脚手架用于生成一个具备完整文件目录结构的项目样板；

S2、编写目录结构

脚手架初始化完成后，创建一个完备的组件库模版，编写目录结构；

S3、构建前端UI组件库

构建流程从编写脚本、构建指令开始，依次生成项目入口、新建组件开发、开发完成后对项目进行打包并发布；具体包括：

S31、编写自动化生成脚本

通过运行指定脚本文件，自动生成或删除一个组件所关联的所有文件；

S32、构建指令

指令是执行脚本的命令，会放到package.json中的scripts中以及makefile中；

S33、构建项目入口

运行build:file，即会自动执行build-entry.js文件，以生成src目录的入口文件；

S34、新建组件开发

运行new.js文件，生成所有组件关联的文件；之后运行serve构建开发环境，serve指令会配置一个dev-server服务器，从examples目录的入口文件进入，后续对组件的编写、调试、运行都在此dev-server服务器下进行；

S35、打包和发布流程

删除之前打包的文件，生成入口文件，对代码进行检查，根据不同的配置分别进行全量或者按需打包组件和对应样式文件，最后将除了组件之外所用到的工具文件打包。

2.如权利要求1所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述步骤S1具体包括如下步骤：

S11、开发者使用命令行工具调用node.js，通过指令的方式快速搭建一个组件库项目；

S12、脚手架本身也是一个项目，首先要初始化该项目，生成package.json，在package.json中添加字段bin，用来存放一个可执行的文件，当项目全局部署后，使用bin字段中设置的cli指令来执行可执行的文件，用以构建一个新的组件库；

S13、使用工具解析命令携带的参数以及配置与开发者进行交互的相关属性，通过命令行携带不同参数和开发者交互的不同选择对组件库进行多样化的配置；

S14、拉取远程或创建本地的组件库模版，该模版是一个完善的组件库架构，包含环境的配置、语法检测的配置、单元测试的配置和持续集成的配置。

3.如权利要求2所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述步骤S2中的目录结构至少包括：package.json文件、src目录和examples目录。

4.如权利要求3所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述package.json文件包含了项目的版本、入口、脚本和依赖信息，该文件至少需要配置scripts、main、version和files，scripts包含相关脚本，main是目标入口文件，version是项目的版本，files是发布包时需要包含的文件/目录。

5.如权利要求3所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述src目录将编写的所有组件做一个统一处理，同时包含每个组件的样式和逻辑、自定义指令、项目整体入口、组件国际化、组件mixins、动画的封装和公共方法。

6.如权利要求3所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述examples目录用于展示组件的示例文档，在入口文件中将src目录中编写的所有组件引入，通过路由配置将每个组件展示到页面上。

7.如权利要求3所述的通用的前端UI组件库的设计和构建方法，其特征在于，所述examples目录是独立的项目，编写一个loader，loader是资源和模块的转换器，接受源文件为参数，返回转换后的结果；该loader负责将标题、示例组件和示例代码用特殊标识包裹起来，将docs目录中markdown文件中所有用该标识包裹的内容抽出来并合并，最后生成一个完整的组件。