<p><code></p> <p>有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到。 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂不支持。所以,我认为每一个前端都应该具备能为公司架构一套 UI 组件库的能力。</p> <p>因为机缘巧合,我在 Github 上发起了一次 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> UI 组件库开源项目的活动,参与人数达到 40 多人,本以为一套 UI 库就是一堆组件叠加在而已,40 个人,每人一个组件,应该会很快搞定吧。万万没想到,一套UI库会有那么多内容,我们几十个人,研究探索好几个月,爬过无数坑,项目才慢慢走上正规,估计下个迭代就可以和大家见面了。</p> <p>也正因为UI库对公司如此重要,但是开发过程又并不简单,所以我觉得我的这个宝贵经验可以帮助到大家。接下来我可以和大家分享一下我做整个开源项目的思路。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>我们这套开源项目主要分为两点,第一是项目完全以模拟企业流程开发;第二是用一套前端工业化知识来完成项目的。</p> <p><strong>第一完全以模拟企业流程开发,内容如下:</strong><br />1、tapd 敏捷管理工具,我们会按照真实企业,在 tapd 上创建迭代,写需求,分配任务。</p> <p>2、代码仓库工具选择 github,操作 git 工具使用企业中最常用的 sourceTree</p> <p>3、我会安排架构师、技术经理、产品、设计师、测试等角色,让参与者完全体验正规流程</p> <p>4、我会模拟各种真实会议,需求评审会、每日站会、代码评审会、测试用例评审会、以及各种技术分享会。</p> <p>5、我会模拟迭代的提测、上线等流程,来保证项目质量。</p> <p>6、我积极鼓励参与者选择多种角色来进行项目实战,例如参与者除了开发工作,也可以选择尝试技术经理,或者架构师等角色,我们这边工作人员都会辅助参与者扮演好角色。让参与者能学到更多东西。</p> <p>7、我希望用最规范的企业流程来管理开源项目。</p> <p><strong>第二是用一套前端工业化知识,内容如下:</strong><br />1、一套好的项目编写思路,让你明白先写什么,后写什么。例如我们应该先定义 css 架构,如果不先做这步,会有很多坑。</p> <p>2、分支管理策略。我们项目可能是好几十个人参与,怎么样的分支策略,能让代码冲突最小化,几乎不出现任何问题呢。</p> <p>3、如何打造一套 css 架构。</p> <p>4、一套让全员代码风格、规范统一的策略。通过 eslint 配合 git 自动化检测代码,保证全员风格统一。</p> <p>5、打造一套 scripts 前端工作流,通过命令生成统一组件、 自动更新组件引入、打包发布等。</p> <p>6、站在设计模式的角度,架构和优化组件库,保证代码质量。</p> <p>7、对代码进行单元测试。单元测试并不是调用几个 api 而已,而是告诉你单测到底测什么,测哪些,怎么测,才能保证代码低 bug。</p> <p>8、如何在没有设计师支持的情况下,前端如何为 UI 组件库制作一套字体图标。</p> <p>9、通过项目思路、设计模式、css 架构、scripts 工作流、单元测试、分支策略、eslint 策略等一套标准前端工业化体系知识来构建这套 UI 库。</p> <p>如果以上都懂的高手,请略过。</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_24417.html