一、组件库的价值

  • 就个人而言,拥有一套自己的组件库,可以让你的开发变得更高效,让你在行业里更有价值。
  • 就团队而言,拥有一套团队的组件库,可以让协同开发变得更高效规范,让你的团队在公司更具有影响力。
  • 就公司而言,拥有一套公司维护的开源组件库,可以让你的公司在行业里更具有影响力。

二、哪些情况需要整合一套组件库

  • 从业务上看,当业务达到一定规模后,很多地方需要复用
  • 从设计上看,产品要遵循一定的设计规范来保持统一性
  • 从开发上看,对开发效率要求高,需要快速迭代和响应开发需求
  • 从维护上看,需要统一代码管理,需要达到更改一处全局响应的高可维护性

三、组件设计应遵循什么原则

    • 就近管理
      1. 单文件开发
      2. 依赖的静态资源放在同级目录
      3. 相关联组件也放在同级目录
    • 高复用性
      1. 页面级别的复用(基础组件)
      2. 项目级别的复用- 私有组件库(业务组件)
      3. 公司级别的复用- 开源组件库(element-ui、iview)
    • 分层设计
      分层架构分为四个层:展示层(presentation layer),业务层(business layer),持久层(persistence layer)和数据库层(database layer)。
      由于每一层都是封闭的,所以request必须逐层向下传递。那么为什么每一层都是封闭的呢,因为有个概念叫层隔离。层隔离就是说架构中某一层的改变不会影响到其他层,这些变化的影响范围仅限于当前层。
      假如展示层和业务层都能够直接访问持久层,那么当持久层的数据变化时,会直接影响到展示层和业务层,这使得整个应用的耦合度变高了,使得组件之间相互依赖,降低了可维护性。
    • 灵活扩展
      组件要充分的考虑扩展性,除了提供丰富的props还要提供slot插槽来完成用户的定制化需求。或者提供可利用render函数动态渲染的功能。

一个优质的Vue组件库应该遵循什么样的设计原则的更多相关文章

  1. Vue组件库的那些事儿,你都知道吗?

    前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...

  2. 利用webpack打包自己的第一个Vue组件库

    先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...

  3. 发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下

    发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下:https://segmentfault.com/a/1190000011377961 vantUI框架在vue项目中的应用 ...

  4. 【万字长文】从零配置一个vue组件库

    简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含 ...

  5. 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题

    最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...

  6. 滴滴开源 Vue 组件库— cube-ui

    cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 ...

  7. Vue组件库读取自定义配置文件

    有这样一个场景,在组件库中新增一个配置文件,后续只修改一下配置文件中的配置项就可以实现不同的需求,下面就让我们I一起来实现吧. (一)在在项目的根目录(package.json所在目录)中创建一个vu ...

  8. vue组件库用markdown生成文档

    前言: 开发vue组件库需要提供组件的使用文档,最好是有渲染到浏览器的demo实例,既能操作又能查看源代码.markdown作为常用的文档编写载体,如果能在里面直接写vue组件,同时编写使用说明就再好 ...

  9. ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!

    前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦! Vue 组件千千万,只要不行咱就换. ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退 ...

随机推荐

  1. RabbitMQ各协议异同详解

    一.官网介绍 Which protocols does RabbitMQ support? RabbitMQ supports several messaging protocols, directl ...

  2. loadrunner socket协议问题归纳(3)

    摘要:通过实例讲解loadrunner中的socket协议性能测试的一种测试方法,如何不依赖loadrunner既定规则,自行控制收发数据包 关键词:Loadrunner,socket,自行控制,收发 ...

  3. 0917 词法分析程序(java版)

    1.运行结果: 2.源代码: package 词法分析;import java.util.Scanner;public class fenxi {public static void main(Str ...

  4. 20181016-4 Alpha阶段第1周/共2周 Scrum立会报告+燃尽图 04

    此作业要求https://edu.cnblogs.com/campus/nenu/2018fall/homework/2248 Scrum master:徐常实 一.小组介绍 组长:王一可 组员:范靖 ...

  5. VIM字符编码基础知识

    1 字符编码基础知识 字符编码是计算机技术中最基本和最重要的知识之一.如果缺乏相关知识,请自行恶补之.这里仅做最简要的说明. 1.1 字符编码概述 所谓的字符编码,就是对人类发明的每一个文字进行数字 ...

  6. FPGA的软核与硬核

    硬核 zynq和pynq系列的fpga都是双ARM/Cortex-A9构成,这里的ARM处理器为硬核,Cortex-A9部分为FPGA部分.即整体分为两部分:PS/PL.PS部分为A9处理器部分,PL ...

  7. MacOS下安装BeautifulSoup库及使用

    BeautifulSoup简介 BeautifulSoup库是一个强大的python第三方库,它可以解析html进行解析,并提取信息. 安装BeautifulSoup 打开终端,输入命令: pip3 ...

  8. hdu1242 Rescue DFS(路径探索题)

    这里我定义的路径探索题指 找某路能够到达目的地,每次走都有方向,由于是探索性的走 之后要后退 那些走过的状态都还原掉 地址:http://acm.hdu.edu.cn/showproblem.php? ...

  9. ZOJ 1842 Prime Distance(素数筛选法2次使用)

    Prime Distance Time Limit: 2 Seconds      Memory Limit: 65536 KB The branch of mathematics called nu ...

  10. 周总结<6>

    周次 学习时间 新编写代码行数 博客量(篇) 学到知识点 13 10 100 2 网页设计:邻接矩阵深度以及广度遍历