画蓝本，是产品副经理日常生活重要的工作之一，我发现很多产品副经理在画蓝本的这时候，会再次出现以下下问题：

1、每天做新项目的这时候，蓝本所有组件、网页、组件都是从0到1，用最基础的组件进行女团，很费时间不说，画出来的蓝本还不雅观；

2、没有插值的观念，这次画了之后，到时候再画又是相同的路子再画两遍，没有积累经验，没有积累更多的计划；

3、长期已成人肉蓝本机，沉迷蓝本难以自拔，产品下层潜能难以得到提高，始终难以升任高阶产品副经理。

再次出现那些问题，主要是产品副经理没有组件库的观念。这首诗，撷取如何构筑自己的组件库，防止再次出现以上问题。

01. 组件库

组件别列济夫由组件共同组成的一系列整套解决计划，组件大小不一，最轻的组件是按键、文字、相片、快捷方式等，那些组件透过女团形成组件块，再女团而成网页，网页再女团而成组件。

从力学层面来说，产品正是由那些大小不一的组件共同组成。

采用组件库，能提高他们画蓝本的工作效率，比如说，C端产品，都有登入注册登记的组件，B端产品都有用户配角职权组件，如果有现场的组件库，画蓝本的这时候，间接从组件莫拉拖出来就能了，省却了再去利用基础组件画蓝本的时间。

除此以外，采用组件库，还能积累更多的计划，比如说平常他们在做同价位分析的这时候，看到自己家的某一组件总的来说，能间接把这个组件透过蓝本画出来，放在自己的计划库，之后再做类似的功能组件时，则能免试而选。

透过自己计划和自己计划的对照，还能分析出自己计划的优劣，能进一步提高结构设计潜能。

C端产品三万人巧，而B端产品组件相对照较统一，不会有太小的改变，C端产品的组件库能透过产品分析来不断积累，B端产品组件库能去参照一些开放源码的后端架构。

02. 常见的后端架构

每个后端架构，都有国际标准的结构设计规范和详尽的组件采用说明，阅读那些组件说明，能丰富自己的计划库，提高蓝本结构设计潜能。

常用的组件，B端有小厂的组件如二进制颤动的ArcoDesgin，腾讯的TDesign，还有采用振幅比较高的Element、iView，终端端有Vux、Vant、Muse等。

管理前台较旧的架构不多，介面组件差别也不大，将后端采用的架构组件，细线无数个国际标准组件，就能快速构筑蓝本。

列出几个常用的架构，有兴趣可以去看一下。

B端：

1、iView UI组件库

iView 是一套基于 Vue.js 的开放源码 UI 组件库，主要服务于 PC 介面的中前台产品，组件齐全、更新很快、文档详尽。有公司团队维护，是比较可靠的Vue UI组件架构。iView生态也做得很好，还有开放源码了一个iView Admin，做前台非常方便。

官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。

官网：https://www.iviewui.com/

2、 Element UI组件库

Element，一套为开发者、结构设计师和产品副经理准备的基于 Vue 2.0 的桌面端组件库。由饿了么后端开放源码维护，更新振幅很高，基本一周到半个月都会发布一个新版本。

组件齐全，基本涵盖前台所需的所有组件，文档讲解详尽，例子也很丰富。Element是一个质量比较高的Vue UI组件库。

官网：http://element.eleme.io/#/zh-CN

3、Ant Design Vue UI组件库

Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级前台产品。在GitHub上能找到几个Ant Design的Vue组件。不过相比较而言，Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React结构设计工具体系，实现了所有Ant Design of React的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。熟悉Ant Design的在采用Vue时很容易上手。

官网：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

4、ArcoDesgin

接近2021年年末，二进制颤动一下子发布了两款企业级中前台结构设计体系，一个是ArcoDesgin，另一个是SemiDesgin。ArcoDesgin团队描述，ArcoDesgin透过结构设计系统去解决产品面临的体验问题，以及透过给出的结构设计原则，来指导解决业务问题，并且它还能促进结构设计团队与研发团队的协作。

他们认为ArcoDesgin是务实而又浪漫的，务实在于结构设计体系解决基础问题，浪漫在于结构设计体系具备开放性，允许浪漫的结构设计模式诞生。并且ArcoDesgin一推出时，就具备了非常完善的潜能，组件库只是其中之一。

可见，ArcoDesgin间接对标Ant Design，结构设计体系在中国不再只有Ant Design一家。

官网：https://arco.design

5、TDesgin

2021年腾讯TDesgin组件库发布。

腾讯TDesgin结构设计体系不仅包括了企业级中前台组件库，基于腾讯广泛的业务潜能，同时还推出了终端端、小程序端组件库，并且包含了Figma、Sketch、Axure等常用的结构设计资产。按照结构设计团队的描述，其也是从腾讯繁杂的业务中寻找共性，抽取出普适的通用结构设计解决计划，为产品赋能。

在研发侧支持业界主流的 React/Vue/Angular/微信小程序/Flutter 开发技术栈；多端适配，提供桌面端和终端端两套风格统一的组件资源。

官网：

https://tdesign.tencent.com

C端：

1、 Vux UI组件库

Vux是基于WeUI和Vue2.x开发的终端端UI组件库，主要服务于微信网页。Vux的定位很明确，一是：Vue终端端UI组件库，二是：WeUI的基础样式库。

Vux的组件涵盖了所有的WeUI的内容，还扩展了一些常用的组件。比如说：Sticky、timeline、v-chart、XCircle。

Vux是个人维护的。但是GitHub上star还是很高达到13k。在GitHub上看到对issue的关闭还是很迅速的。Vux文档基本的组件用法和效果都讲解到位了。在vux官网上也展示了很多Vux的采用案例。在微信网页开发中，基本没有太多的bug，开发比较顺手。

官网：https://vux.li/

2、Vant UI组件库

Vant是一个轻量、可靠的终端端 Vue 组件库。Vant是有赞团队开放源码的，主要维护也是有赞团队。Vant Weapp 是有赞终端端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速构筑小程序应用。截止到目前，Vant已经开放源码了50+ 个经过有赞线上业务检验的组件。

比如说：、AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡片、Contact 联系人、Coupon 优惠券、GoodsAction 商品页行动点、SubmitBar 提交订单栏、Sku 商品规格弹层。如果做商城，不太在意介面，实现业务逻辑的话，用Vant组件库开发还是很快的。

官网：

https://youzan.github.io/vant/#/zh-CN/intro

3、cube-ui UI组件库

cube-ui 是基于 Vue.js 实现的精致终端端组件库。

由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。在交互体验方面追求极致。遵循统一的结构设计交互国际标准，高度还原结构设计效果；接口国际标准化，统一规范采用方式，开发更加简单高效。

支持按需引入和后编译，轻量灵活；扩展性强，能方便地基于现有组件实现二次开发。

官网：

https://didi.github.io/cube-ui/#/zh-CN

写在最后

采用组件库其实是利用模型观念，将解决计划进行封装，从而提高结构设计工作效率，并透过插值对解决计划进行升级，每个产品副经理，都要拥有自己的组件库。

网上有很多整套的组件库，我不建议间接拿来采用，间接采用自己的组件，会缺失一些结构设计过程，知其然不知其所以然，我建议组件库一定要自己命名，自己总的来说，采用振幅高的组件，就归入自己的组件库。

看到自己总的来说的组件，自己再去画两遍，再放入自己的组件库，这样画蓝本过程当中才会去思考，自己画两遍，印象会比较深，之后用起来能更方便的找到。还能撷取给自己。