封装Vue组件库（一）、前置知识

CDD - 组件优先开发方式

CDD（Component-Driven Development）：组件驱动开发

• 自上而下构建UI的过程
• 从组件级别开始，到页面级别结束
  • 先从相对完善的设计中，抽象出组件。先隔离开发组件，然后开发页面。

CDD 的好处：

• 组件在最大程度被重用
• 并行开发
  • 对单个组件的开发，使用CDD，可以让以页面级开发无法实现的方式在不同团队之间共享任务，这个任务就是开发相对隔离的组件。
• 可视化测试
  • 通过一些工具可以直接浏览组件，而不需要到业务系统中再测试组件，可以对组件的不同状态进行测试

学习内容

• Vue 官方文档的 处理组件的边界情况
  • 回顾关于处理组件边界的API
• Vue CLI 提供的 快速原型开发
  • 方便进行组件开发，并能够单独运行单文件组件
• 开发组件库的最佳实践方式：
  • Storybook
    • 用于隔离开发组件、方便管理组件库 和 对组件进行测试
  • Monorepo
    • 项目结构的一种组织方式，有利于管理组件库项目的结构
  • Plop
    • 基于模块快速生成一个组件的基本结构
  • Lerna + Yarn workspaces 的工作方式
    • 管理包的依赖，以及方便提交和发布所有组件
  • Jest
    • 组件开发完毕后，对组件进行测试
  • Rollup
    • 项目打包

处理组件的边界情况

Vue 中用于处理组件边界情况的API（官方文档）：

• $root 访问Vue的根实例
  • 在组件比较少的小型项目中，可以在Vue根实例中存储共享数据，并且是响应式的，这样很方便
  • 但是大多数情况下，还是推荐Vuex管理应用的状态
• $parent 获取父组件
  • 使用 $parent 获取父组件的成员，可以替换 props 使用
  • 通过 $parent 获取的成员是可以修改的（props不能修改），也就是子组件可以直接修改父组件中的成员
  • 如果应用复杂，将变得难以维护，如果通过这种方式改变了父组件成中的员，出现了问题，就很难找到更改的位置
  • 当组件嵌套比较多的时候，使用起来也不方便
• $children 获取所有子组件
  • $children是一个数组，通过索引获取子组件，可读性不高
  • 如果要获取所有子组件可以使用这种方式，如果要获取单个子组件可以使用 ref
• $refs 通过 ref 访问特定组件
  • 如果在普通的HTML标签上定义 ref 属性，获取的就是这个标签的 DOM 对象
  • 如果在自定义组件上定义 ref 属性，获取的就是这个组件的实例
  • 注意：需要在组件渲染完毕后才能通过 ref 获取组件
  • Element-ui 中就是使用 $refs 获取表单组件，调用它的validate方法进行验证
• 依赖注入 provide / inject
  • 如果组件嵌套比较多的话，使用$parent 或 props就会比较麻烦（每个组件都要传递），通过依赖注入，可以很方便的让子孙组件使用祖先组件注入的成员
  • 祖先组件通过 provide 提供成员
  • 子孙组件通过 inject 注入祖先组件提供的成员
  • 注意：通过依赖注入方式注入到子孙组件的成员同 props 一样，不是响应式的，不能被修改，可以看成大范围的 props
  • 坏处：组件之间的耦合变高，子孙组件依赖祖先组件，使重构变得困难，开发自定义组件的时候可以使用这种方式

$attrs / $listeners

开发自定义组件时可能会用到这两个属性。

• $attrs

父组件给子组件设置的非 prop 属性（没有被props接收），默认会绑定到子组件的根元素上。

如果是 class 或 style，Vue 会将其与子组件中原有的值合并。（props中也不允许设置这两个属性）

这些属性中除了 class 和 style ，可以用 $attrs 获取。

可以通过设置选项 inheritAttrs为 false，取消这个默认继承的行为（class 和 style 还是会正常继承合并）。

然后手动通过 $attrs 绑定属性。

// 父组件
<child type="text" required placeholder="enter your name"></child>

// 子组件
<div>
  <input v-bind="$attrs" />
  或者
  <input :type="$attrs.type" :required="$attrs.required" :placeholder="$attrs.placeholder" />
</div>

• $listeners

同 $attrs 类似，可以获取父组件绑定到子组件的所有事件。

它不会默认绑定到子组件的根元素，可以通过 $listeners 向内部组件传递。

// 父组件
<child @input="onInput" @change="onChange" @myevent="onmyevent"></child>

// 子组件
<div>
  <!--input 和 change 都是input的原生事件，直接绑定即可生效-->
  <!--myevent 不是input支持的原生事件，绑定无效-->
  <input v-on="$listeners" />
  
  <!--手动绑定事件-->
  <comp @onchange="$listeners.change"></comp>
</div>

快速原型开发

• Vue CLI 中提供了一个插件可以进行原型快速开发
  • 它可以很方便的运行一个单文件组件，而不需要关心额外的配置
  • 适合开发少量的组件
• 这个插件必须全局安装，所以没有保证所有机器上的版本一致（后面有其他的工具替换）
  • npm i -g @vue/cli-service-global
• 开发完组件后，使用 vue serve 快速查看组件的运行效果
  • 注意：使用 vue 命令，所以要安装 npm i -g @vue/cli

vue server

• vue server 默认会在当前目录寻找以下入口文件
  • main.js、index.js、App.vue、app.vue
• 也可以指定要加载的入口文件（组件）
  • vue server ./src/login.vue

二次开发

除了从零开始开发自定义组件外，还可以在第三方组件的基础上进行二次开发，例如基于Element-UI 开发自己的组件。

安装 ElementUI 和 配置

• 初始化 package.json npm init -y
• 安装 ElementUI vue add element

# 如何导入 ElementUI
? How do you want to import Element? (Use arrow keys)
Import on demand # 按需导入
# 选择本地语言
? Choose the locale you want to load (Use arrow keys)
zh-CN

• 加载 ElementUI，使用 Vue.use() 安装插件

// /main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// Login.vue中使用了elementUI中的组件
import Login from './src/Login.vue'

Vue.use(ElementUI)

new Vue({
  el:'#app',
  render: h => h(Login)
})

运行 vue serve 会自动生成 index.html 引入 main.js。

组件分类

• 第三方组件
  • 例如：ElementUI、iview
  • 如果开发的组应用对界面要求不高，可以直接使用第三方组件
• 基础组件
  • 例如：文本框、按钮、表单
  • 如果对组件的样式有比较高的要求，或者有一套自己的使用标准，这个时候需要开发自己的组件库，开发一套方便团队内部使用的基础组件（或通用组件）
• 业务组件
  • 结合特定的行业使用场景的组件，根据用户的行为输出特定的界面展示给用户
  • 如果针对特定的行业，比如财务、餐饮或者人力系统，会有针对特定业务可以抽象出来的组件，方便未来的重用
  • 开发业务组件一般可以基于现有的组件（例如第三方组件），在基于现有组件的基础上进行开发