一、组件库的价值

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

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

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

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

    • 就近管理
      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. selenium+Java,xpath定位方法详解(搬运留存)

    用xpath绝对路径比较费事费力,还容易报错,下面几种模糊定位比较灵活好用 driver.findElement(By.xpath("//*[@id='J_login_form']/dl/d ...

  2. NOIP2018出征策

    蒟蒻的风之旅人即将退役,现在分享一下退休前的故事 首先,经过这么多时间的划水训练,我成功从一个萌新变成了一个蒟蒻.我学会了各种奇怪玄学的算法,比如说昨天老师讲的NOIP第三题通用的算法,叫做XG算法, ...

  3. 排序(C语言实现)

    读数据结构与算法分析 插入排序 核心:利用的是从位置0到位置P都是已排序的 所以从位置1开始排序,如果当前位置不对,则和前面元素反复交换重新排序 实现 void InsertionSort(Eleme ...

  4. HDU 6438

    Problem Description The Power Cube is used as a stash of Exotic Power. There are n cities numbered 1 ...

  5. shell基础 -- 基本语法

    本文介绍一下 shell 的语法. 一.变量 在 shell 里,使用变量之前通常并不需要事先为他们做出声明,需要使用的时候直接创建就行了.默认情况下,所有变量都被看做字符串并以字符串来存储,即使它们 ...

  6. PIL包中图像的mode参数

    在这里的第一篇. 这篇的是为了说明PIL库中图像的mode参数. 我做的事情是: 在本地找了jpg的图,convert为不同mode,将不同的图截取做了个脑图,有个直观的感觉吧. 把不同mode的图通 ...

  7. 《linux内核分析》 第二周

    20135130 王川东 计算机三个“法宝”:存储程序计算机.函数调用堆栈和中断机制 深入理解函数调用堆栈: 堆栈是C语言运行时必须的一个记录调用路径和参数的空间: 作用包括: 函数调用框架: 保存参 ...

  8. 强化学习之QLearning

    注:以下第一段代码是 文章 提供的代码,但是简书的代码粘贴下来不换行,所以我在这里贴了一遍.其原理在原文中也说得很明白了. 算个旅行商问题 基本介绍 戳 代码解释与来源 代码整个计算过程使用的以下公式 ...

  9. 2018软工实践—Alpha冲刺(5)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助测试的进行 测试项目运行的服务器环境 ...

  10. 软工 · BETA 版冲刺前准备(团队)

    软工 · BETA 版冲刺前准备(团队) 过去存在的问题 组员之间缺乏沟通,前后端缺乏沟通协作 组员积极性不高 基础知识不够扎实 手动整合代码效率过低 我们已经做了哪些调整/改进 通过会议加强组员之间 ...