物料中心简介

1、 基本概念

物料(Material) 这个概念在前端领域大家都不陌生，在一些开源平台解释物料即组成一个前端项目的不同单位，根据抽象粒度的不同，我们将物料从小到大分为组件（component）、区块（block）和模板（scaffold）。其实在这里可以理解为前端可复用的组件模块都可理解成物料。    

随着公司的业务越来越多，如何提高资源、组件及代码的复用率，提升整体研发效率；提升项目的上下游协作效率，涉及到从UE到UI到FE再到QA的整个流程，这需要很强的推动力和足够的说服力；提升人效比，让前端做的更快、更多、更好；最后是将整体方法进行梳理，把提效的这部分能力应用在PC后端、多端小程序、及其他H5中，实施通用化.那么如何前端如何提高资源利用率，提高工作效率呢？

首先，就需要建设前端物料体系，重新定义和统一前端的开发标准，建设前端物料资源体系，其中包括设计和单元测试等资源；第二，实行工具化管理，完善工程体系，统一前端的开发流程和技术栈，保证资源复用率；最后也是最重要的就是`渐进式开发`，因为它决定了物料完成之后能不能达到最佳的复用率，下面是一个基本物料体系的整体结构图

2、物料中心构成简介

2.1 物料资源

目前我们有pc组件库，和多端组件库，二者都分为基础组件和业务组件，以及后期我们还会增加，方法库，sdk,图表库等

2.2 Cli脚手架工具

整体采用主子脚手架的形式

1 全局安装主脚手架ezr-cli

2 不同的项目引用相对应的子脚手架ezr-react-script,ezr-vue-script,ezr-taro-script,ezr-node-script

这样既保证了使用上的统一性，又保证不同项目构建运行管理的独立性

现在通过Cli 改造的两个项目是 EZR.FE.Crm.Web，EZR.FE.CrmActivity.Web

cli-dev分支是脚手架改造后的分支，你可以把此分支合并到你现有的开发分支，或者你可以切换到此分支，把我上面讲到的两个改动配置文件拷贝到你项目的对应文件中去。

2.3 GUI 工具

犀牛项目管理功能，能进行项目的日常管理，包括导入项目，创建项目，项目启动，依赖重装，以及编辑操作，一键打开项目编辑器，一键打开文件目录，全程可视化操作，方便快捷，未来还将叠加更强大的功能，组件导入，区块插入，一键同步git项目等，下面我们来简单讲解一下它的基本使用流程

详细使用教程： https://docs.ezrpro.work/wiki/43/rvzj02nb

3、 如何提供一个高质量的物料

3.1 提交一个高质量的组件

3.1.1 高质量React组件的原则和方法：

划分组件边界的原则；

React组件的数据种类；

React组件的生命周期。

3.1.2 易于维护组件的设计要素

1、高内聚：指的是把逻辑紧密相关的内容放在一个组件中。用户界面包括：内容、交互行为、样式。

2、低耦合：指的是不同组件之间的依赖关系要尽量弱化，也就是第个组件要尽量独立。

3.1.3 完善的文档

1 对于ezrpc业务组件，只要是你增加或者删除了组件属性，你都应该对使用文档进行更新

2 对于多端组件，你增加或者删除了组件属性，你首先要更新相应的demo示例，然后再更新使用文档。

3 新增或者修改组件 没有相应的文档和demo的更新，其实就相当于你的组件没有开发完成，而且给他人的使用还会带来很多不必要的麻烦，一个功能你有，但是你没有通过文档展示出来，别人也不知道你有这个功能，那你不就是白写了么。

4、物料中心更多能力

4.1 vscode插件

像一些开源插件一样，基于我们丰富的组件库，区块，模板等，我们会开发相应的vscode插件，让大家能够一键导入物料资源，提高开发效率

4.2 区块的集成

4.3 模板的创建

4.4 支持拖拽式可视化开发