打造 Vue.js 组件库 黄轶
2020-03-01 852浏览
- 1.打造 Vue.js 组件库 ⻩黄轶
- 2.北北京科技⼤大学毕业，计算机专业硕⼠士 曾任职百度、滴滴，现担任Zoom前端架构师 慕课⽹网明星讲师 Vue.js 布道者，《Vue.js 技术揭秘》独⽴立作者， 《Vue.js 权威指南》主要作者 ⻩黄 轶 Github：ustbhuangyi 开源项⽬目 better-scroll 作者，并主导滴滴开源项⽬目 cube-ui，建⽴立团队技术博客 对前端⼯工程化，前后端性能优化有丰富的经验
- 3.⽬目录 CONTENTS 背景 组件设计 ⼯工程化
- 4.背景
- 5.背景 • 从业务⻆角度看，业务成⻓长到⼀一定规模后，共性的地⽅方需要复⽤用。 • 从设计⻆角度看，产品会遵循⼀一定的设计规范，需要保证产品⼀一致性。 • 从开发效率⻆角度来看，需要快速响应业务开发。 • 从维护⻆角度来看，需要统⼀一管理理代码，不不希望到处复制粘贴。
- 6.组件设计 • 设计原则 • 开发规范 • 模块依赖
- 7.设计原则 就近管理理 ⾼高复⽤用性 分层设计 灵活扩展
- 8.设计原则-就近管理理 • 单⽂文件开发 • 依赖的静态资源放在同级⽬目录 • 相关联组件也放在同级⽬目录 cube-ui element-ui
- 9.设计原则-⾼高复⽤用性 • ⻚页⾯面级别的复⽤用（基础组件） • 项⽬目级别的复⽤用 —私有组件库（业务组件） • 公司级别的复⽤用 —开源组件库（element-ui、cube-ui）
- 10.设计原则-分层设计 通过分层设计的思想设计复杂组件 城市选择器器组件、时间选择器器组件 联动选择器器 CascadePicker 实现 基础选择器器 Picker 实现 弹层类组件 popup 基础滚动 better-scroll
- 11.设计原则-灵活扩展 组件设计要尽量量灵活可扩展，除了了提供丰富的 Props，还可以利利 ⽤用 slot 插槽完成⽤用户个性化定制需求
- 12.开发规范 组件库需要设计统⼀一的开发规范 ⽬目录设计 ⽬目录设计 代码编写 代码编写 ⽂文档和测试 ⽂文档和测试
- 13.开发规范-⽬目录设计 cube-ui ⽬目录结构
- 14.开发规范-代码编写 HTML 部分 • 使⽤用 .vue 单⽂文件开发组件，template 模板 • 尽量量使⽤用语义化标签
- 15.开发规范-代码编写 HTML 部分 • 遇到相同的结构考虑抽象 出组件
- 16.开发规范-代码编写 HTML 部分 Popup
- 17.开发规范-代码编写 HTML 部分 Picker ActionSheet
- 18.开发规范-代码编写 CSS 部分 • CSS 预处理理器器（stylus、less、sass）、autoprefixer • 定义全局变量量：颜⾊色、字体
- 19.开发规范-代码编写 CSS 部分 • 定义全局 Mixin 函数 • 组件样式使⽤用 scope 或者 BEM 命名规范
- 20.开发规范-代码编写 JS 部分 • ES2015、eslint • 避免魔术字符串串和魔术数字、⽤用常量量替代
- 21.开发规范-代码编写 JS 部分 • 组件遇到相同的逻辑可以抽象出 Mixin Dialog PopopMixin Picker
- 22.开发规范-代码编写 JS 部分 • ⽗父组件往⼦子孙组件注⼊入依赖可以考虑⽤用 provide/inject ScrollNav ScrollNav ScrollNavBar
- 23.开发规范-代码编写 JS 部分 • 尽量量避免写 hack 的代码， 如需要，⼀一定要写明注释 Slide
- 24.开发规范-⽂文档和测试 每个组件都要有详细的使 ⽤用⽂文档、以及示例例代码 ⽂文档和测试 需要提供组件库的安装、 需要有完整的单元测试、测 快速上⼿手等⽂文档 试覆盖率达到 90% 以上
- 25.模块依赖 组件库可以依赖⼀一些核⼼心模块作为辅助。 ⽬目录设计 vue-create-api 代码编写 better-scroll ⽂文档和测试 popper.js （移动端） （PC端）
- 26.模块依赖- vue-create-api • ⼀一个能够让 Vue 组件通过 API ⽅方式调⽤用的插件。 • 动态把组件挂载到 body 下。 • ⽀支持传⼊入响应式 props、events、插槽、单例例和多例例模式。 • 在普通 JS ⽂文件中也能调⽤用组件。
- 27.模块依赖- vue-create-api ⽀支持把任意组件变成 API 式的调⽤用
- 28.模块依赖- better-scroll • 重点解决移动端（⽀支持 PC 端）各种滚动场景需求的插件。 • 原⽣生 JS 实现，可配合任意 MVVM 框架使⽤用。 • ⽀支持丰富的配置。
- 29.模块依赖- better-scroll 普通滚动 下拉刷新 上拉加载
- 30.模块依赖- better-scroll Picker 索引列列表 滚动导航
- 31.模块依赖- better-scroll TabBar 开屏引导 轮播图
- 32.模块依赖- better-scroll 图⽚片预览 ⽆无限滚动
- 33.模块依赖- poper.js • 重点解决 PC 端弹出层类需求的插件。 • 它是⼀一个定位引擎，通过动态计算元素的位置，将其定位在给定的参考元素附近。 • 原⽣生 JS 实现，可配合任意 MVVM 框架使⽤用。
- 34.模块依赖- poper.js 选择器器 ⽂文字提示 （右边空间不不够）
- 35.模块依赖- poper.js ⽇日期选择 （下边空间不不够） 弹出框
- 36.⼯工程化 • npm scripts • 打包部署 • 单元测试 • ⽣生态建设
- 37.npm scripts 1 2 介绍 常⻅见场景
- 38.npm scripts- 介绍 npm 允许在package.json⽂文件⾥里里⾯面，使⽤用scripts字段定义脚本命令 命令⾏行行下使⽤用npm run命令，就可以执⾏行行这段脚本。 等同于执⾏行行
- 39.npm scripts- 常⻅见场景 cube-ui 的 npm scripts
- 40.npm scripts- 常⻅见场景 element-ui 的 npm scripts
- 41.单元测试 1 2 介绍 编写测试⽤用例例
- 42.单元测试-介绍 ⽤用于测试组件模块的⾏行行为是否能达到预期结果的代码 • 保证组件库库在后续的开发维护的稳定性 • 降低⼈人⼯工测试的成本
- 43.单元测试-介绍 • 测试⼯工具 karma • 测试框架 mocha • 断⾔言⼯工具 chai • 测试覆盖率
- 44.单元测试-编写测试脚本 describe 块称为“测试套件”（test suite），表示 ⼀一组相关的测试 it 块称为"测试⽤用例例"（test case）， 表示⼀一个单独的测试，是测试的最⼩小单位 expect 表示断⾔言，判断源码的实际执⾏行行结果与 预期结果是否⼀一致，如果不不⼀一致就抛出⼀一个错 误。
- 45.打包部署 ⽬目录设计 ⼊入⼝口 JS 编写 代码编写 Webpack 构建配置 ⽂文档和测试 部署脚本
- 46.打包部署-⼊入⼝口 JS 编写 以 cube-ui 为例例
- 47.打包部署-⼊入⼝口 JS 编写 以 TimePicker 组件为例例
- 48.打包部署-webpack 构建配置 以 cube-ui 组件为例例
- 49.打包部署-编写构建脚本 cube-ui 的构建脚本
- 50.⽣生态建设 脚⼿手架 按需引⼊入 上⼿手教程 Q&A 后编译
- 51.⽣生态建设-脚⼿手架 脚⼿手架可以帮我们快速⽣生成项⽬目的初始化代码。 Vue 官⽅方提供了了 vue-cli 脚⼿手架帮助我们快速⽣生成 Vue 项⽬目 Vue-cli 3.0 提供了了插件化机制允许我们给初始化项⽬目注⼊入代码和配置 • vue-cli-plugin-element • vue-cli-plugin-cube-ui
- 52.⽣生态建设-脚⼿手架 • 添加组件引⼊入代码 • 新增 vue.config.js 扩展 webpack 配置 • 新增依赖插件并下载安装
- 53.⽣生态建设-上⼿手教程 帮助⽤用户快速学习和了了解组件库的使⽤用 • cube-application-guide
- 54.⽣生态建设-按需引⼊入 只引⼊入需要的组件，以达到减⼩小项⽬目体积的⽬目的 右边在左边显示完出现 借助 webpack-transform-modules-plugin 下⾯面要在上⾯面展示完显示
- 55.⽣生态建设-后编译 编译代码冗余？ 依赖包本身不不编译，它的编译交给应⽤用来做。 通过修改 webpack 配置 rules 中的 include
- 56.⽣生态建设-后编译 后编译依赖嵌套？ webpack-post-compile-plugin 需要后编译的依赖包在 package.json 中声明
- 57.⽣生态建设-后编译 • ⼀一份编译代码 • ⼀一份 ployfill • NPM包⽆无需编译发布 • 主题定制 • rem布局
- 58.⽣生态建设-Q&A 整理理常⻅见的问题问答
- 59.Q&A ？
- 60.Vue.js ⾼高仿开发 Vue 2.0实战⾼高级- Vue.js 源码 饿了了么APP 开发移动端⾳音乐 全⽅方位深⼊入解析 Web APP 完整流程 复杂应⽤用 ⾼高级进阶
- 61.THANK YOU ⻩黄轶
