一个优质的Vue组件库应该遵循什么样的设计原则
一、组件库的价值
- 就个人而言,拥有一套自己的组件库,可以让你的开发变得更高效,让你在行业里更有价值。
- 就团队而言,拥有一套团队的组件库,可以让协同开发变得更高效规范,让你的团队在公司更具有影响力。
- 就公司而言,拥有一套公司维护的开源组件库,可以让你的公司在行业里更具有影响力。
二、哪些情况需要整合一套组件库
- 从业务上看,当业务达到一定规模后,很多地方需要复用
- 从设计上看,产品要遵循一定的设计规范来保持统一性
- 从开发上看,对开发效率要求高,需要快速迭代和响应开发需求
- 从维护上看,需要统一代码管理,需要达到更改一处全局响应的高可维护性
三、组件设计应遵循什么原则
- 就近管理
1. 单文件开发
2. 依赖的静态资源放在同级目录
3. 相关联组件也放在同级目录 - 高复用性
1. 页面级别的复用(基础组件)
2. 项目级别的复用- 私有组件库(业务组件)
3. 公司级别的复用- 开源组件库(element-ui、iview) - 分层设计
分层架构分为四个层:展示层(presentation layer),业务层(business layer),持久层(persistence layer)和数据库层(database layer)。
由于每一层都是封闭的,所以request必须逐层向下传递。那么为什么每一层都是封闭的呢,因为有个概念叫层隔离。层隔离就是说架构中某一层的改变不会影响到其他层,这些变化的影响范围仅限于当前层。
假如展示层和业务层都能够直接访问持久层,那么当持久层的数据变化时,会直接影响到展示层和业务层,这使得整个应用的耦合度变高了,使得组件之间相互依赖,降低了可维护性。
- 灵活扩展
组件要充分的考虑扩展性,除了提供丰富的props还要提供slot插槽来完成用户的定制化需求。或者提供可利用render函数动态渲染的功能。
一个优质的Vue组件库应该遵循什么样的设计原则的更多相关文章
- Vue组件库的那些事儿,你都知道吗?
前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...
- 利用webpack打包自己的第一个Vue组件库
先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...
- 发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下
发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下:https://segmentfault.com/a/1190000011377961 vantUI框架在vue项目中的应用 ...
- 【万字长文】从零配置一个vue组件库
简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含 ...
- 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题
最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...
- 滴滴开源 Vue 组件库— cube-ui
cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 ...
- Vue组件库读取自定义配置文件
有这样一个场景,在组件库中新增一个配置文件,后续只修改一下配置文件中的配置项就可以实现不同的需求,下面就让我们I一起来实现吧. (一)在在项目的根目录(package.json所在目录)中创建一个vu ...
- vue组件库用markdown生成文档
前言: 开发vue组件库需要提供组件的使用文档,最好是有渲染到浏览器的demo实例,既能操作又能查看源代码.markdown作为常用的文档编写载体,如果能在里面直接写vue组件,同时编写使用说明就再好 ...
- ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!
前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦! Vue 组件千千万,只要不行咱就换. ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退 ...
随机推荐
- RabbitMQ各协议异同详解
一.官网介绍 Which protocols does RabbitMQ support? RabbitMQ supports several messaging protocols, directl ...
- loadrunner socket协议问题归纳(3)
摘要:通过实例讲解loadrunner中的socket协议性能测试的一种测试方法,如何不依赖loadrunner既定规则,自行控制收发数据包 关键词:Loadrunner,socket,自行控制,收发 ...
- 0917 词法分析程序(java版)
1.运行结果: 2.源代码: package 词法分析;import java.util.Scanner;public class fenxi {public static void main(Str ...
- 20181016-4 Alpha阶段第1周/共2周 Scrum立会报告+燃尽图 04
此作业要求https://edu.cnblogs.com/campus/nenu/2018fall/homework/2248 Scrum master:徐常实 一.小组介绍 组长:王一可 组员:范靖 ...
- VIM字符编码基础知识
1 字符编码基础知识 字符编码是计算机技术中最基本和最重要的知识之一.如果缺乏相关知识,请自行恶补之.这里仅做最简要的说明. 1.1 字符编码概述 所谓的字符编码,就是对人类发明的每一个文字进行数字 ...
- FPGA的软核与硬核
硬核 zynq和pynq系列的fpga都是双ARM/Cortex-A9构成,这里的ARM处理器为硬核,Cortex-A9部分为FPGA部分.即整体分为两部分:PS/PL.PS部分为A9处理器部分,PL ...
- MacOS下安装BeautifulSoup库及使用
BeautifulSoup简介 BeautifulSoup库是一个强大的python第三方库,它可以解析html进行解析,并提取信息. 安装BeautifulSoup 打开终端,输入命令: pip3 ...
- hdu1242 Rescue DFS(路径探索题)
这里我定义的路径探索题指 找某路能够到达目的地,每次走都有方向,由于是探索性的走 之后要后退 那些走过的状态都还原掉 地址:http://acm.hdu.edu.cn/showproblem.php? ...
- ZOJ 1842 Prime Distance(素数筛选法2次使用)
Prime Distance Time Limit: 2 Seconds Memory Limit: 65536 KB The branch of mathematics called nu ...
- 周总结<6>
周次 学习时间 新编写代码行数 博客量(篇) 学到知识点 13 10 100 2 网页设计:邻接矩阵深度以及广度遍历