Vue 的组件开发

前言

通过原生html封装一些组件，相对于一些成熟的ui框架更加简洁、性能更好，可以在移动端使用，通用性更高

1.组件特性

• 从不同角度分析组件的特性

  构成	易变性	影响因素
  结构（视觉）	不易变	内容结构、布局类样式
  结构（内容）	较易变	生成 html 的 js 库/框架的源码、平台限定的视图结构描述语言
  表现（主题风格）	很易变	GUI 设计人员的审美和想法、非布局类样式、图标与图片
  行为（交互逻辑）	不易变	交互设计人员的想法
  行为（业务逻辑）	很易变	业务规则

• 组件封装主要就是为了复用相关代码，所以需要重点考虑不易变的部分

  易变等级	影响因素
  不易变	交互方式
  较易变	源码语法
  很易变	业务和人

2.组件分类

• 原子性
  • 原子组件：不可再分的 ui 组件（按钮、图标、分割线）
  • 复合组件：由一个以上的原子组件构成（菜单、选项卡、对话框）
• 通用性
  • 通用组件：一般作为公共组件维护
  • 专用组件
• 功能性

  组件类别	案例组件
  一.命令输入	按钮组件、下拉菜单组件
  二.数据输入	表单组件、输入框组件、单/复选框组件、级联选择组件、日期拾取器组件、动态渲染组件、动态组件
  三.数据输出	树组件、列表组件、表格组件
  四.信息展示	图标组件、加载状态组件、工具提示组件
  五.容器	手风琴组件、面板组件、选项卡组件、字段集组件
  六.导航	导航菜单组件、面包屑组件、超链接组件
  七.特殊窗口	对话框组件、警告提示组件

3.组件开发

编写一个 Vue.js 组件，最重要的是设计好它的接口，一个 Vue.js 组件的接口来自三个部分：props、slots、events。

4.环境搭建

5.组件发布

• 可以发布到npm仓库
• 公司内部项目可以发布到私有仓库

总结

通过对前端组件的分析，需要重点关注组件中易变性对组件封装的影响，它会对组件的可复用性、可扩展性产生很大影响