学习二十二、组件化开发简述

# 组件化开发

 

## 开源组件库

 

- Element UI

 

- iView

 

## CDD 组件驱动开发

 

- 自上而下

 

- 从组件级别开始，到页面级别结束

 

## CDD 的好处

 

- 组件在最大程度上被重用

 

- 并行开发

 

- 可视化测试

 

## 组件的分类

 

- 第三方组件

 

- 基础组件

 

- 业务组件

 

## 禁用继承

 

inheriAttrs:false

 

v-bind="attrs"

 

v-on="listeners"

 

## 依赖注入

 

provide(){

return {

form:this

}

}

 

inject:['form']

 

## Monorepo

 

两种项目的组织方式

 

- Multirepo(Multiple Repository)

  - 每一个包对应一个项目

- Monorepo (Monolithic Repository)

  - 一个项目仓库中管理多个模块/包

 

## Storybook

 

- 可视化的组件展示平台

- 在隔离的开发环境中，以交互式的方式展示组件

- 独立开发组件

- 支持的框架

  - React、React Native、Vue、Angular、

  - Ember、HTML、Svelte、Mithril、Riot

 

- 自动安装

  - npx -p@storybook/cli sb init --type vue

  - yarn add vue

  - vue yarn add vue-loader vue-template-compiler --dev

  

- 手动安装

  - 查看文档