VUE组件库建设实践.pdf

《VUE组件库建设实践.pdf》由会员分享，可在线阅读，更多相关《VUE组件库建设实践.pdf（38页珍藏版）》请在三个皮匠报告上搜索。

1、Vue 组件库建设实践全球大前端技术大会1.组件库设计原则2.组件库工程化最佳实践CONTENTS 目录3.总结展望前言:组件和抽象组件是一种编程抽象，目的是复用组件和抽象通用型组件库业务型组件库程序员修炼之道从小工到专家DRY原则Dont repeat yourselfDavid ThomasAndrew Hunt全球大前端技术大会抽象改善已有代码的设计三次原则重构Rule of threeMartin Fowler全球大前端技术大会抽象组件库设计1全球大前端技术大会组件设计 内聚性高内聚，低耦合敏捷软件开发原则、模式与实践 耦合性粒度稳定全球大前端技术大会粒度CRP 共同复用原则The C

2、ommon Reuse Principle,CRPSRP 单一职责原则CCP 公用封闭原则The Common Closure Principle一个组件不应该包含多个引起它变化的原因全球大前端技术大会一个组件应不应该引用另一个组件？依赖的弊端耦合高维护成本不稳定性代码的可维护性大于复用性全球大前端技术大会稳定SDP 稳定依赖原则The Stable-Dependencies PrincipleABXYZHCMN稳定性：A B C选择器菜单弹出层SAP 稳定抽象原则The Stable-Abstractions Principle全球大前端技术大会稳定自动完成输入框组件弹出层一个稳定的组件应该

3、是抽象的全球大前端技术大会父子组件如何依赖？CoC 约定大于配置原则Convention over ConfigurationIoC 好莱坞原则Hollywood PrincipleDont call us，well call you子组件的初始化和调用由父组件容器负责全球大前端技术大会设计禁区越界操作环形依赖属性繁多侵入性副作用设计规范先行光效、表面质感、运动感鲜明、形象、有意义有意义的动画效果Material Design全球大前端技术大会统一视觉统一交互色彩字体图标布局动效时长，缓动形变，编排移动路径样式全球大前端技术大会样式分离样式差异化主题定制主题定制工具多种主题交互动画扩展需求：全

4、球大前端技术大会辅助平台工具文档脚手架示例迭代组件库工程化最佳实践2组件管理方案多组件私密性社区参与多人参与全球大前端技术大会需求：Lernahttps:/lernajs.io/多包管理工具一键安装依赖独立版本管理非Npm包全球大前端技术大会优点：自动更新依赖国际化 i18n45种语言支持af 荷兰语ar 阿拉伯cs-CZ 捷克de 德语fi 芬兰he 希伯来hu 匈牙利语ko 朝鲜lv 拉托维亚pl 波兰语pt-br 葡萄牙语ru 俄罗斯sk 斯洛伐克sk 斯洛文尼亚th 泰语tr 土耳其vi 越南ms 马来西亚In 印度尼西亚全球大前端技术大会1制作语言文件2替换文字3运行时转换直接mix

5、in函数t全球大前端技术大会Vue国际化vue-i8n测试方案全球大前端技术大会MochaKarma驱动测试框架断言库chaiSinonIstanbulMock覆盖率全球大前端技术大会浏览器框架karma startkarma configTest case报告chaireporters预处理器webpackBDD通过率覆盖率UI caseCoveralls 提交覆盖率报告runKarma全球大前端技术大会Jest一站式的测试方案 DOM API 断言库 Mock库 快照 覆盖率vue-test-utilshttps:/vue-test-utils.vuejs.org/zh/shallowMo

6、untmountrenderrenderToStringJest全球大前端技术大会提取全局变量合理继承、衍生修改主题样式覆盖主题样式组件显示传值，内置样式处理实现：自定义主题：https:/material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=CE93D8主题方案Webpack动态生成入口文件版本号复制Lint构建umd模块规范输出构建commonjs2模块规范输出对每个组件，构建commonjs