为公司架构一套高质量的 Vue UI 组件库
有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到。 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂不支持。所以,我认为每一个前端都应该具备能为公司架构一套 UI 组件库的能力。
因为机缘巧合,我在 Github 上发起了一次 Vue UI 组件库开源项目的活动,参与人数达到 40 多人,本以为一套 UI 库就是一堆组件叠加在而已,40 个人,每人一个组件,应该会很快搞定吧。万万没想到,一套UI库会有那么多内容,我们几十个人,研究探索好几个月,爬过无数坑,项目才慢慢走上正规,估计下个迭代就可以和大家见面了。
也正因为UI库对公司如此重要,但是开发过程又并不简单,所以我觉得我的这个宝贵经验可以帮助到大家。接下来我可以和大家分享一下我做整个开源项目的思路。
我们这套开源项目主要分为两点,第一是项目完全以模拟企业流程开发;第二是用一套前端工业化知识来完成项目的。
第一完全以模拟企业流程开发,内容如下:
1、tapd 敏捷管理工具,我们会按照真实企业,在 tapd 上创建迭代,写需求,分配任务。
2、代码仓库工具选择 github,操作 git 工具使用企业中最常用的 sourceTree
3、我会安排架构师、技术经理、产品、设计师、测试等角色,让参与者完全体验正规流程
4、我会模拟各种真实会议,需求评审会、每日站会、代码评审会、测试用例评审会、以及各种技术分享会。
5、我会模拟迭代的提测、上线等流程,来保证项目质量。
6、我积极鼓励参与者选择多种角色来进行项目实战,例如参与者除了开发工作,也可以选择尝试技术经理,或者架构师等角色,我们这边工作人员都会辅助参与者扮演好角色。让参与者能学到更多东西。
7、我希望用最规范的企业流程来管理开源项目。
第二是用一套前端工业化知识,内容如下:
1、一套好的项目编写思路,让你明白先写什么,后写什么。例如我们应该先定义 css 架构,如果不先做这步,会有很多坑。
2、分支管理策略。我们项目可能是好几十个人参与,怎么样的分支策略,能让代码冲突最小化,几乎不出现任何问题呢。
3、如何打造一套 css 架构。
4、一套让全员代码风格、规范统一的策略。通过 eslint 配合 git 自动化检测代码,保证全员风格统一。
5、打造一套 scripts 前端工作流,通过命令生成统一组件、 自动更新组件引入、打包发布等。
6、站在设计模式的角度,架构和优化组件库,保证代码质量。
7、对代码进行单元测试。单元测试并不是调用几个 api 而已,而是告诉你单测到底测什么,测哪些,怎么测,才能保证代码低 bug。
8、如何在没有设计师支持的情况下,前端如何为 UI 组件库制作一套字体图标。
9、通过项目思路、设计模式、css 架构、scripts 工作流、单元测试、分支策略、eslint 策略等一套标准前端工业化体系知识来构建这套 UI 库。
如果以上都懂的高手,请略过。
原文地址:https://segmentfault.com/a/1190000016896747
为公司架构一套高质量的 Vue UI 组件库的更多相关文章
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- 使用vue1.0+es6+vue-cli+webpack+iview-ui+jQuery 撸一套高质量的后台管理系统
首先按照vue.js官网的指令安装: 1.本地安装好node.js 2.根据官方命令行工具 详情 这样一个官方的脚手架工具就已经搭建好了:但是有一点需要注意的是由于现在按照官方的搭建方法是搭建vue2 ...
- GearCase UI - 自己构建一套基于 Vue 的简易开源组件库
最近 1 ~ 2 月除了开发小程序之外,还一直在继续深入的学习 Vuejs.利用零碎.闲暇的时间整合了一套基于 Vue 的 UI 组件库.命名为 GearCase UI,意为齿轮盒.现在把该项目进行开 ...
- 一套高可用、易伸缩、高并发的IM群聊架构方案设计实践
本文原题为“一套高可用群聊消息系统实现”,由作者“于雨氏”授权整理和发布,内容有些许改动,作者博客地址:alexstocks.github.io.应作者要求,如需转载,请联系作者获得授权. 一.引言 ...
- 高质量App的架构设计与思考!
最近在做一功能不大.业务也不复杂的小众App,以往做App是发现自己从来没有考虑过一些架构方面的问题,只是按照自己以往的习惯去写代码,忽略了App的设计.本次分享主要包含一些开发App的小经验和技巧, ...
- 16套java架构师,高并发,高可用,高性能,集群,大型分布式电商项目实战视频教程
16套Java架构师,集群,高可用,高可扩展,高性能,高并发,性能优化,设计模式,数据结构,虚拟机,微服务架构,日志分析,工作流,Jvm,Dubbo ,Spring boot,Spring cloud ...
- 一套高可用、易伸缩、高并发的IM群聊、单聊架构方案设计实践
一套高可用.易伸缩.高并发的IM群聊.单聊架构方案设计实践 一套高可用.易伸缩.高并发的IM群聊.单聊架构方案设计实践-IM开发/专项技术区 - 即时通讯开发者社区! http://www.52im. ...
- 高质量C++/C编程指南(林锐)
推荐-高质量C++/C编程指南(林锐) 版本/状态 作者 参与者 起止日期 备注 V 0.9 草稿文件 林锐 2001-7-1至 2001-7-18 林锐起草 V 1.0 正式文件 林锐 20 ...
- 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...
随机推荐
- TC学习总结
带宽管理: TC中规定描述带宽: mbps = 1024 kbps = 1024 * 1024 bps => byte/s mbit = 1024 kbit => kilo bit/s m ...
- php 获得上周数据
$lastMondy = date('Y-m-d', strtotime('-2 sunday +1 days', time()));$lastSundy = date('Y-m-d', strtot ...
- POJ 2104 K-th Number && 洛谷 P3834 【模板】可持久化线段树 1(主席树)
我惊奇的发现这两道题一模一样 题目背景 这是个非常经典的主席树入门题——静态区间第K小 数据已经过加强,请使用主席树.同时请注意常数优化 题目描述 如题,给定N个整数构成的序列,将对于指定的闭区间查询 ...
- python之商品操作小程序
要求:写一个添加商品的程序,商品信息写入txt文件中,以二维字典形式比如:{‘小米’:{‘价格’:‘1999元’,‘数量’:10}} 1.添加商品 #商品名称 #价格 #数量 2.查看商品 3.删除商 ...
- 水题 Codeforces Round #304 (Div. 2) A. Soldier and Bananas
题目传送门 /* 水题:ans = (1+2+3+...+n) * k - n,开long long */ #include <cstdio> #include <algorithm ...
- IOS-关闭(退)键盘事件--转
方法: 1.手势(触背景)关闭键盘 -(void)tapBackground //在ViewDidLoad中调用{ UITapGestureRecognizer * tap = [[UITapG ...
- RHEL 6.5-----MFS
主机名 IP 安装服务 master 192.168.30.130 mfsmaster.mfsmetalogger node-1 192.168.30.131 chunkserver n ...
- LN : leetcode 416 Partition Equal Subset Sum
lc 416 Partition Equal Subset Sum 416 Partition Equal Subset Sum Given a non-empty array containing ...
- CCF|最大波动|Java|100
import java.util.*; public class Main { public static void main(String[] args) { Scanner in = new Sc ...
- iOS 根据屏幕宽度, 高度判断手机设备
#define iPhone_5 [UIScreen mainScreen].bounds.size.width == 320.0 #define iPhone_6 [UIScreen mainScr ...