CN111680339A - 一种基于blocks或积木物料组装平台 - Google Patents

Abstract

本发明涉及一种基于blocks或积木物料组装平台，所述物料组装平台包括文档模块、组件模块、代码片段模块以及模板模，该方案配合私有组件库verdaccio完成快速开发能力，提高代码和组件的复用率，降低开发成本和代码维护成本。

Description

一种基于blocks或积木物料组装平台

技术领域

本发明涉及一种组装平台，具体涉及一种基于blocks或积木物料组装平台，属于物料组装平台技术领域。

背景技术

现在web端开发，都是独立的临时性的框架项目，代码冗余度很高，每个项目框架构成都有自己独特的风格表现以及重复的依赖工具包、方法、组件穿插在每个项目中进行维护，造成资源的浪费，也导致重复开发且代码风格不一，后期很难扩展，维护难度较大，并且随着业务的增加，***将会变得越来越臃肿，性能以及构建速度会越来越慢，最后不得不选择迁移或推倒重来，用人成本也在加大，无法应对快速复杂的业务场景和市场的响应能力，因此，迫切的需要一种新的方案解决上述技术问题。

发明内容

本发明正是针对现有技术中存在的问题，提供一种基于blocks或积木物料组装平台，该技术方案中的blocks或积木是个物料组装平台，内容主要涵盖项目的主题定制，页面布局，组件的使用，代码片段的使用，通用方法的使用，比如： API请求的使用、过滤器的使用、指令的使用等等，还有常见问题的知识沉淀，在这个平台上，能找到几乎所有的开发相关的知识，并实现快速项目的开发。

为了实现上述目的，本发明的技术方案如下，一种基于blocks或积木物料组装平台，其特征在于，所述物料组装平台包括文档模块、组件模块、代码片段模块以及模板模块,工具链模块。

文档模块，作为组件开发和代码片段以及其它模板模块的开发指南，代码片段包含组件模块的具体实施，模板模块又涵盖代码片段的实施，成为一个整体。工具链模块，主要为组件，模板开发提供支撑，比如快速生成组件、模板的命令可视化操作，在工具链模块配置命令行

例如1：实现一个vue项目的安装和基于webpack的项目

npm install–global vue-cli

vue init webpack

my-project cd my-project

npm install

npm run dev

例如2：快速生成一个组件模板

git clone [email protected]:mobile-component/zn_vue_ui_name.git

cd zn_vue_ui_name

npm install

npm run serve

点击相应的触发按钮，实现模板，组件的一键创建。

作为本发明的一种改进，所述文档模块包括

1.1.1设计原则

对比(Contrast)

对比的基本思想是，要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同，那就干脆让它们截然不同。要让页面引人注意，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。

重复(Repetition)

让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，既能增加条理性，还可以加强统一性。

对齐(Alignment)

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

亲密性(Proximity)

1.1.2布局

导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。

选择合适的导航

选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和「顶部导航」的区别。

侧栏导航

可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

一级类目一级类目适用于结构简单的网站：只有一级页面时，不需要使用面包屑。

二级类目二级类目侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。

三级类目三级类目适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。

顶部导航

顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。

适用于导航较少，页面篇幅较长的网站。

1.1.3关于

物料-marterial

包含区块,布局,模板和组件

区块-block

复用的最小代码片段

布局-layout

为众能提供整体布局方案的代码

模板-scaffold

整站示例,脚手架

2.作为本发明的一种改进，所述组件模块包括基础组件、复合组件、业务组件、常用指令、常见问题以及公用方法:

2.1基础组件为最小粒度的组件，基础组件拼装成复合组件，复合组件拼装成业务组件，达到灵活快速开发页面的目的

2.2开发过程中比如权限指令(控制按钮权限)，拖拽指令(组件可拖拽操作)等，以及公用方法，比如时间moment(时间插件)，深拷贝(避免污染原有数据)等方法的使用

其中基础组件包括：分页组件(列表分页)，日历浏览组件(日期选择预览)，卡片组件(卡片)，弹窗组件(弹框)，地图组件(地图)以及上传组件(文件上传)；

所述复合组件包括：列表筛选组件(搜索)，列表组件(列表)以及表单组件(表单)，

业务组件包括：异常组件(401 501错误处理界面)；

常用指令包括：埋点指令(埋点)和按钮权限指令(按钮权限)；

常见问题包括：路由开发注意事项(注意事项)和idea自定义代码片段 (代码片段)；

公用方法包括：数据埋点(埋点处理)，网络请求(api请求方式get post)，过滤器(filter)，全局方法(loading加载)以及JSX。

作为本发明的一种改进，所述代码片段模块包括组件代码片段和Element 代码片段:

组件代码片段:实现组件的一键生成，针对组件

Element代码片段:实现常用代码块的一键生成比如：zn-el-select

其中组件代码片段包括分页、日历、卡片、弹框、地图、tab、列表筛选、列表以及表单组件，Element代码片段包括下拉片段和Vue生命周期创建片段。

作为本发明的一种改进，所述模板模块包括基础模板和定制模板，基础模板主要包括项目中通用个的模板，下载模板可以直接搭建简单的基础页面，定制模板，主要为公司内部定制化界面，下载后实现内部***的快速搭建和启动最后将每一个影响因子分布在未来的某一天或某一段时间，存储在Hive临时表中。

相对于现有技术，本发明的优点如下：

1)该技术方案实现了组件可视化，组件发布后即可视，组件的更新，平台发布后实施查看组件当前的最新的更改，并配有demo，使用说明；

2)该技术方案实现了代码片段动效查看，每个组件的使用都配有动效图，让零基础的开发者也能顺利上手开发；

3)该技术方案可以模板的下载，未来平台规划可直接再平台中下载指定的模板，包含众能模板和公用模板，实现快速生成项目模板；

4)该技术方案实现脚手架的下载，平台将规划，不同技术栈的脚手架的下载通道，未来将跨技术栈跨平台，无缝对接指定技术栈的脚手架，实现平台快速定制化开发；

5)该技术方案实现知识库沉淀，该平台最大的亮点，会储备知识沉淀，未来不依赖于人驱动开发，而是通过知识库驱动开发，不仅降低成本而且对人的依赖减少，比如相关人员离职，对项目风险影响并不会太大。

附图说明

图1为本发明整体结构示意图。

具体实施方式：

为了加深对本发明的理解，下面结合附图对本实施例做详细的说明。

实施例1：参见图1，一种基于blocks或积木物料组装平台，所述物料组装平台包括文档模块、组件模块、代码片段模块以及模板模块,工具链模块。文档模块，作为组件开发和代码片段以及其它模板模块的开发指南，代码片段包含组件模块的具体实施，模板模块又涵盖代码片段的实施，成为一个整体。工具链模块，主要为组件，模板开发提供支撑，比如快速生成组件、模板的命令可视化操作，在工具链模块配置命令行

例如1：实现一个vue项目的安装和基于webpack的项目

npm install–global vue-cli

vue init webpack

my-project cd my-project

npm install

npm run dev

例如2：快速生成一个组件模板

git clone [email protected]:mobile-component/zn_vue_ui_name.git

cd zn_vue_ui_name

npm install

npm run serve

点击相应的触发按钮，实现模板，组件的一键创建。

1.所述文档模块包括

1.1.1设计原则

对比(Contrast)

对比的基本思想是，要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同，那就干脆让它们截然不同。要让页面引人注意，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。

重复(Repetition)

让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，既能增加条理性，还可以加强统一性。

对齐(Alignment)

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

亲密性(Proximity)

1.1.2布局

导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。

选择合适的导航

选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和「顶部导航」的区别。

侧栏导航

可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

一级类目一级类目适用于结构简单的网站：只有一级页面时，不需要使用面包屑。

二级类目二级类目侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。

三级类目三级类目适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。

顶部导航

顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。

适用于导航较少，页面篇幅较长的网站。

1.1.3关于

物料-marterial

包含区块,布局,模板和组件

区块-block

复用的最小代码片段

布局-layout

为众能提供整体布局方案的代码

模板-scaffold

整站示例,脚手架

2.所述组件模块包括基础组件、复合组件、业务组件、常用指令、常见问题以及公用方法：

2.1基础组件为最小粒度的组件，基础组件拼装成复合组件，复合组件拼装成业务组件，达到灵活快速开发页面的目的

2.2开发过程中比如权限指令(控制按钮权限)，拖拽指令(组件可拖拽操作)等，以及公用方法，比如时间moment(时间插件)，深拷贝(避免污染原有数据)等方法的使用

其中基础组件包括：分页组件(列表分页)，日历浏览组件(日期选择预览)，卡片组件(卡片)，弹窗组件(弹框)，地图组件(地图)以及上传组件(文件上传)；

所述复合组件包括：列表筛选组件(搜索)，列表组件(列表)以及表单组件(表单)，

业务组件包括：异常组件(401 501错误处理界面)；

常用指令包括：埋点指令(埋点)和按钮权限指令(按钮权限)；

常见问题包括：路由开发注意事项(注意事项)和idea自定义代码片段(代码片段)；

公用方法包括：数据埋点(埋点处理)，网络请求(api请求方式get post)，过滤器(filter)，全局方法(loading加载)以及JSX。

所述代码片段模块包括组件代码片段和Element代码片段:

组件代码片段:实现组件的一键生成，针对组件

Element代码片段:实现常用代码块的一键生成比如：zn-el-select

其中组件代码片段包括分页、日历、卡片、弹框、地图、tab、列表筛选、列表以及表单组件，Element代码片段包括下拉片段和Vue生命周期创建片段。

所述模板模块包括基础模板和定制模板，基础模板主要包括项目中通用个的模板，下载模板可以直接搭建简单的基础页面，定制模板，主要为公司内部定制化界面，下载后实现内部***的快速搭建和启动最后将每一个影响因子分布在未来的某一天或某一段时间，存储在Hive临时表中。

该方案中的每个组件是一个单独的工程，为了快速实现组件开发，blocks 有自己的一套组件开发模板，zn_vue_ui_name只要再gitlab库中clone下来， npm i依赖安装，然后npm run serve就可以快速启动模板组件，然后根据模板组件进行定制化开发；

其中组件部分也是本物料组装平台的核心，开发的组件主要放在私有组件库，verdaccio中，组件npm publish发布后，物料组装平台通过更新组件版本npm update或npmi@mobile-component/[对应的组件名]@latest--save，提交到 gitlab后，jenkis自动化构建后在平台上就能对应的展示更新后的内容，包括 demo和代码。当开发者新开发一个功能的时候,在项目main.js中引入import ZnBasePage from'@mobile-component/[组件名]'Vue.use(组件名)，就可以参照blocks对应的demo和方法，实现快速的组件开发，比如：

<zn-base-table></zn-base-table>实现一个带分页的列表，

代码片段是本平台的第二个核心，通过代码片段可以快速实现常见场景的快速开发，比如：

zn-base-table这个组件，我们可以用代码片段进行提前写好，然后再编辑器中引用，最后直接输入关键字zn-base就可以快速筛选出对应的代码片段，点击生成

代码片段的实现：

"zn_vue_ui_basetable":{

"prefix":"zn-base-table",

"body":[

"<zn-base-table\n:loading＝\"tableParam.loading\"\n:titles＝\"tableParam.titles\"\n:data＝\"tableParam.data\"\n:totalRecords＝\"tableParam.totalRecords\"\n:pageSize＝\"tableParam.pageSize\"\n:page No＝\"tableParam.pageNo\"\n:changePage＝\"changePage\"\n:onPageSize Change＝\"onPageSizeChange\"\n:selectionChange＝\"selectionChange\">\ n</zn-base-table>"

],"description":"列表组件快捷生成"

}。

该方案支持组件升级，既视查看，减少页面依赖性的开发，组件库与blocks项目的无缝对接，通过ci.sh拉取所有组件进当前项目的文件夹，开发后组件升级，发布，构建全链路体系，生态建设，物料拼装平台(blocks或积木)，将会构建一套生态体系，支撑各技术栈业务场景的快速迭代快速响应的能力。

需要说明的是上述实施例仅仅是本发明的较佳实施例，并没有用来限定本发明的保护范围，在上述技术方案的基础上做出的等同替换或者替代均属于本发明的保护范围。

Claims (5)

1.一种基于blocks或积木物料组装平台，其特征在于，所述物料组装平台包括文档模块、组件模块、代码片段模块以及模板模块。

文档模块，作为组件开发和代码片段以及其它模板模块的开发指南，代码片段包含组件模块的具体实施，模板模块又涵盖代码片段的实施，成为一个整体。

工具链模块，主要为组件，模板开发提供支撑，比如快速生成组件、模板的命令可视化操作，在工具链模块配置命令行

点击相应的触发按钮，实现模板，组件的一键创建。

2.根据权利要求1所述的一种基于blocks或积木物料组装平台，其特征在于，所述文档模块包括:

1.1.1设计原则

对比；

重复，让设计中的视觉要素在整个作品中重复出现；

亲密性；

1.1.2布局：选择合适的导航，侧栏导航、顶部导航；

1.1.3关于

物料包含区块,布局,模板和组件；

区块复用的最小代码片段；

布局为众能提供整体布局方案的代码；

模板整站示例,脚手架。

3.根据权利要求1所述的一种基于blocks或积木物料组装平台，其特征在于，所述组件模块包括基础组件、复合组件、业务组件、常用指令、常见问题以及公用方法:

2.1基础组件为最小粒度的组件，基础组件拼装成复合组件，复合组件拼装成业务组件，达到灵活快速开发页面的目的

2.2开发过程中比如权限指令(控制按钮权限)，拖拽指令(组件可拖拽操作)等，

以及公用方法，比如时间moment(时间插件)，深拷贝(避免污染原有数据)等方法的使用

其中基础组件包括：分页组件(列表分页)，日历浏览组件(日期选择预览)，卡片组件(卡片)，弹窗组件(弹框)，地图组件(地图)以及上传组件(文件上传)；

所述复合组件包括：列表筛选组件(搜索)，列表组件(列表)以及表单组件(表单)，

业务组件包括：异常组件(401 501错误处理界面)；

常用指令包括：埋点指令(埋点)和按钮权限指令(按钮权限)；

常见问题包括：路由开发注意事项(注意事项)和idea自定义代码片段(代码片段)；

公用方法包括：数据埋点(埋点处理)，网络请求(api请求方式get post)，过滤器(filter)，全局方法(loading加载)以及JSX。

4.根据权利要求1所述的一种基于blocks或积木物料组装平台，其特征在于，所述代码片段模块包括组件代码片段和Element代码片段:

组件代码片段:实现组件的一键生成，针对组件

Element代码片段:实现常用代码块的一键生成比如：zn-el-select

其中组件代码片段包括分页、日历、卡片、弹框、地图、tab、列表筛选、列表以及表单组件，Element代码片段包括下拉片段和Vue生命周期创建片段。

5.根据权利要求1所述的一种基于blocks或积木物料组装平台，其特征在于，所述模板模块包括基础模板和定制模板，基础模板主要包括项目中通用个的模板，下载模板可以直接搭建简单的基础页面，定制模板，主要为公司内部定制化界面，下载后实现内部***的快速搭建和启动。

Images