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