vue 中使用的原子设计原理

vue开发使用的原子设计方法

image.png

原子：包括基本的HTML元素，如表单标签、输入、按钮和其他不停止工作就无法进一步分解的元素

image.png

分子：是一个简单的、可移植的、可重用的组件，可以放在任何需要搜索功能的地方。

image.png

生物体：可以由相似或不同的分子类型组成。标题有机体可能由不同的元素组成

image.png

模板：是页面级对象，用于将组件放置到布局中并清楚地表达设计的基础内容结构。为了在前面的示例基础上构建，我们可以将头有机体应用于主页模板
它们关注页面的底层内容结构，而不是页面的最终内容。设计系统必须考虑到内容的动态特性，因此很有助于阐明组件的重要特性，如标题和文本段落的图像大小和字符长度

image.png

页面：页面是模板的特定实例，显示了具有真正代表性内容的UI的外观。

image.png

具体设计实例

image.png

原文参考：https://atomicdesign.bradfrost.com/chapter-2/