一种前端UI组件库构建方法及系统技术方案

本发明专利技术公开一种前端UI组件库构建方法及系统，包括：创建项目文件；创建配置文件；创建用于存放组件库源代码的文件夹，并在文件夹下创建配置文件的打包入口文件；创建全局样式配置文件，以根据业务需求编辑生成不同的组件样式；采用打包入口文件导出组件，且组件内调用生成的组件样式，采用配置文件进行组件源代码的打包，将打包文件添加到项目文件中，并在本地进行组件测试，测试通过后将组件库进行发布。构建了兼容性强且成熟的前端组件库，且可根据业务需求设计不同的组件样式，方便相关业务开发。务开发。务开发。

【技术实现步骤摘要】
一种前端UI组件库构建方法及系统


[0001]本专利技术涉及软件开发
，特别是涉及一种前端UI组件库构建方法及系统。

技术介绍

[0002]本部分的陈述仅仅是提供了与本专利技术相关的
技术介绍
信息，不必然构成在先技术。
[0003]当前前端技术不仅被用于运行在浏览器web应用程序的开发，还可以基于H5的混合APP技术开发移动平台的应用程序，以及使用Electron等框架开发桌面应用程序等。像H5、Electron等跨平台开发的技术方案都会基于浏览器内核或类似的渲染引擎，都内置浏览器，实际的界面渲染工作都是由自带的浏览器内核完成。基于这样的原理，只要前端代码是通用的，不依赖某一特定浏览器提供的API或某一系统底层API的，就可以将代码重复使用到web、H5、Electron等项目中。尽管vue以及基于vue封装的代码本身并不能直接用于移动端或者桌面端应用的开发，但是有很多解决方案可以用于使用前端技术方便快捷地创建原生的移动或桌面应用；而且组件本身不应涉及API跨平台问题。因此，跨平台的组件构建需要着重考虑对不同视图尺寸、布局等的兼容。
[0004]目前前端社区组件库数量非常丰富，基于不同的前端框架构建，主要有面向PC端和移动端的组件库以及同时面向PC端和移动端，都是基于webpack、rollup、vite等工具打包的，构建的方法大同小异。
[0005]常见的组件库基于Angular、React、Vue等流行的前端框架，例如阿里的Ant Design组件库，拥有基于Angular、React、Vue的不同版本，饿了么的Element
‑
ui也有Angular、React、Vue版本的，华为Devui也同样有基于Angular、React、Vue的不同版本Devui组件库，或者使用webpack作为组件库打包工具，或者使用rollup、vite打包。另外，社区也有大量专门为移动端打造的组件库，例如有赞移动UI组件库Vant，滴滴出行移动端组件库Cube UI和京东移动端UI组件库等。
[0006]但是，上述大部分现有组件库的设计实现都是与其各自内部的业务有关；因此在使用这些组件库时需要接受他们的设计风格以及代码实现方式，那么，在使用这些组件库时必定会受到一定的限制。
[0007]例如，使用Ant Design Vue的Upload上传附件组件时，组件的样式等虽然在一定程度上是可配置的，但是如已上传的附件列表的展示、上传的附件数据格式、回调方法等都是很难做出较大修改的；
[0008]也就是，所使用的功能的上限就是组件能够提供的功能的上限，如果业务需求要求实现更多的功能，那就必须作出额外的修改，并且这个修改是一次性的，不能在别的地方被复用的。

技术实现思路

[0009]为了解决上述问题，本专利技术提出了一种前端UI组件库构建方法及系统，构建了兼
容性强且成熟的前端组件库，且可根据业务需求设计不同的组件样式，方便相关业务开发。
[0010]为了实现上述目的，本专利技术采用如下技术方案：
[0011]第一方面，本专利技术提供一种前端UI组件库构建方法，包括：
[0012]创建项目文件；
[0013]创建配置文件；
[0014]创建用于存放组件库源代码的文件夹，并在文件夹下创建配置文件的打包入口文件；
[0015]创建全局样式配置文件，以根据业务需求编辑生成不同的组件样式；
[0016]采用打包入口文件导出组件，且组件内调用生成的组件样式，采用配置文件进行组件源代码的打包，将打包文件添加到项目文件中，并在本地进行组件测试，测试通过后将组件库进行发布。
[0017]作为可选择的实施方式，采用npm init命令创建package.json项目文件，并根据业务需要修改package.json项目文件中的配置。
[0018]作为可选择的实施方式，修改配置的过程包括：
[0019]将private字段的值修改为false，以将项目文件编译打包后发布；
[0020]修改main字段，以指定打包入口文件，并将打包文件路径添加到main字段中；
[0021]添加scripts脚本命令，以在scripts脚本命令字段中添加构建命令进行组件库源代码的打包。
[0022]作为可选择的实施方式，创建webpack配置文件，在webpack配置文件中指定入口文件entry、输出output、模块modules、模块解析resolve和插件plugin；
[0023]其中，安装loader插件，在编辑模块modules的配置时根据webpack配置文件的规则引入loader插件，以使得webpack配置文件导入非.js文件。
[0024]作为可选择的实施方式，创建用于存放组件库源代码的src文件夹，在src文件夹目录下创建webpack配置文件的打包入口文件，webpack配置文件中的entry字段的值是打包入口文件的路径。
[0025]作为可选择的实施方式，通过globalStyle.less的全局样式配置文件编辑全局样式，通过编译less和使用webpack配置文件的mini
‑
css
‑
extract
‑
plugin插件编辑生成不同的组件样式，并在组件的样式文件中引用生成的组件样式。
[0026]作为可选择的实施方式，前端UI组件库的构建引入vuepress，将vuepress嵌入到项目中作为组件库的文档服务器，在生产阶段，将vuepress打包部署到生产服务器上提供文档服务；通过vuepress编写组件文档，且自动将特定路径下的markdown文件转换成vue组件，在markdown文件中编写vue的单文件组件代码。
[0027]第二方面，本专利技术提供一种前端UI组件库构建系统，包括：
[0028]项目文件创建模块，被配置为创建项目文件；
[0029]配置文件创建模块，被配置为创建配置文件；
[0030]打包入口文件创建模块，被配置为创建用于存放组件库源代码的文件夹，并在文件夹下创建配置文件的打包入口文件；
[0031]组件样式创建模块，被配置为创建全局样式配置文件，以根据业务需求编辑生成不同的组件样式；
[0032]组件库发布模块，被配置为采用打包入口文件导出组件，且组件内调用生成的组件样式，采用配置文件进行组件源代码的打包，将打包文件添加到项目文件中，并在本地进行组件测试，测试通过后将组件库进行发布。
[0033]第三方面，本专利技术提供一种电子设备，包括存储器和处理器以及存储在存储器上并在处理器上运行的计算机指令，所述计算机指令被处理器运行时，完成第一方面所述的方法。
[0034]第四方面，本专利技术提供一种计算机可读存储介质，用于存储计算机指令，所述计算机指令被处理器执行时，完成第一方面所述的方法。
[0035]与现有技术相比，本专利技术的有益效果为：...

【技术保护点】

【技术特征摘要】
1.一种前端UI组件库构建方法，其特征在于，包括：创建项目文件；创建配置文件；创建用于存放组件库源代码的文件夹，并在文件夹下创建配置文件的打包入口文件；创建全局样式配置文件，以根据业务需求编辑生成不同的组件样式；采用打包入口文件导出组件，且组件内调用生成的组件样式，采用配置文件进行组件源代码的打包，将打包文件添加到项目文件中，并在本地进行组件测试，测试通过后将组件库进行发布。2.如权利要求1所述的一种前端UI组件库构建方法，其特征在于，采用npminit命令创建package.json项目文件，并根据业务需要修改package.json项目文件中的配置。3.如权利要求2所述的一种前端UI组件库构建方法，其特征在于，修改配置的过程包括：将private字段的值修改为false，以将项目文件编译打包后发布；修改main字段，以指定打包入口文件，并将打包文件路径添加到main字段中；添加scripts脚本命令，以在scripts脚本命令字段中添加构建命令进行组件库源代码的打包。4.如权利要求1所述的一种前端UI组件库构建方法，其特征在于，创建webpack配置文件，在webpack配置文件中指定入口文件entry、输出output、模块modules、模块解析resolve和插件plugin；其中，安装loader插件，在编辑模块modules的配置时根据webpack配置文件的规则引入loader插件，以使得webpack配置文件导入非.js文件。5.如权利要求4所述的一种前端UI组件库构建方法，其特征在于，创建用于存放组件库源代码的src文件夹，在src文件夹目录下创建webpack配置文件的打包入口文件，webpack配置文件中的entry字段的值是打包入口文件的路径。6.如权利要求4所述的一种前端UI组件库构建方法，其特征在于，通过...

【专利技术属性】
技术研发人员：马治民，徐悦颖，赖成宾，张少校，
申请(专利权)人：中孚安全技术有限公司北京中孚泰和科技发展股份有限公司南京中孚信息技术有限公司，
类型：发明
国别省市：