如何在 Vue.js 中引入原子设计？

news2024/12/23 21:05:13

前言

原子设计是一种创建设计系统的方法，它将用户界面分解为可重用的小组件，即：

  1. Atoms 原子
  2. Molecules 分子
  3. Organisms 生物体
  4. Templates 模板
  5. Pages 页面

通过遵循模块化设计方法，原子设计可帮助团队创建一致、可缩放且可维护的 UI。

在这篇文章中，小编将探讨如何在 Vue 中实现原子设计。下文将从 Atomic Design 的基础知识开始，然后演示如何在 Vue.js 中应用其原理。

原子设计由五个级别组成，表示 UI 的构建基块。对于此示例，小编创建了一个倒置树结构，以可视化每个解剖结构的连接方式。

原子 Atoms

原子是 UI 的最小单元，无法在不失去其含义的情况下进一步分解。原子的示例包括图标、按钮、标签、输入和排版。

在 Vue.js 中，原子可以创建为可重用的组件，这些组件接受 props 来自定义它们的外观和行为。

TextboxAtom

<template>
 <div class="component-wrapper" data-name="textBoxAtom">
   <label>{{ label }}: <input type="text" :placeholder="placeHolder" /></label>
 </div>
</template> 

<script>
export default { 
  name: 'TextBoxAtom', 
  props: { 
    label: {
      type: String,
      default: 'labelName'
    }, 
    placeHolder: String, 
  }, 
}; 
</script>
<style scoped>
  input{
      padding: 0.75em 2em;
  }
</style>

ButtonAtom

<template>
 <div class="component-wrapper" data-name="buttonAtom">
  <button :disabled="disabled"> 
    <slot>Button</slot>
  </button> 
 </div>
</template> 

<script>
export default { 
  name: 'ButtonAtom', 
  props: { 
    type: String, 
    size: String, 
    disabled: Boolean,
  },  
}; 
</script>
<style scoped>
button {
  color: #4fc08d;
}
button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.5em 2em;
}
</style>

LogoAtom

<template>
  <div class="component-wrapper" data-name="logoAtom">
    <img :src="computedImageUrl" alt="logo"/>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 50
    },
    height: {
      type: Number,
      default: 50
    }
  },
  computed: {
    computedImageUrl() {
      return `https://picsum.photos/${this.width}/${this.height}`
    }
  }
};
</script>

分子 Molecules

分子是两个或多个原子的组合，它们协同工作以执行特定功能。在 Vue.js 中，可以通过将原子组合为父组件中的子组件来创建分子。分子的例子包括表单、搜索栏、导航菜单和卡片。
参考上面的例子，小编需要组合原子以创建以下分子：

SubscribeFormMoecule

<template>
  <form class="component-wrapper" data-name="subscribeFormMolecules">
    <TextboxAtom label="Email" />
    &nbsp;
    <ButtonAtom>Subscribe</ButtonAtom>
  </form>
</template>

<script>
import TextboxAtom from "https://codepen.io/haroonth/pen/LYXgdKg.js";
import ButtonAtom from "https://codepen.io/haroonth/pen/BaGqrJg.js";
export default {
  components: { ButtonAtom, TextboxAtom }
};
</script>
<style scoped>
form {
  display: inline-flex;
}
</style>

SearchFormMoecule

<template>
  <form class="component-wrapper" data-name="searchFormMolecules">
    <InputAtom label="Search" />
    <ButtonAtom>Search</ButtonAtom>
  </form>
</template>

<script>
import InputAtom from "https://codepen.io/haroonth/pen/LYXgdKg.js";
import ButtonAtom from "https://codepen.io/haroonth/pen/BaGqrJg.js";
export default {
  components: { ButtonAtom, InputAtom }
};
</script>
<style scoped>
form {
  display: inline-flex;
}
</style>

Form Molecule

<template>
  <div class="form-molecule component-wrapper" data-name="formMolecules">
    <div><InputAtom :label="nameLabel" :placeholder="namePlaceholder" /></div>
    <div><InputAtom :label="emailLabel" :placeholder="emailPlaceholder" /></div>
    <p>
      <ButtonAtom :disabled="isSubmitDisabled">
        {{ submitLabel || "Button" }}
      </ButtonAtom>
    </p>
  </div>
</template>

<script>
import InputAtom from "https://codepen.io/haroonth/pen/LYXgdKg.js";
import ButtonAtom from "https://codepen.io/haroonth/pen/BaGqrJg.js";
export default {
  name: "FormMolecule",
  components: {
    InputAtom,
    ButtonAtom
  },
  props: {
    nameLabel: String,
    namePlaceholder: String,
    emailLabel: String,
    emailPlaceholder: String,
    submitLabel: String,
    isSubmitDisabled: Boolean
  }
};
</script>

Organisms

Organisms是形成 UI 不同部分的分子组合，例如页眉、页脚、侧边栏和内容块。在 Vue.js 中，可以通过将分子组合为布局组件中的子组件来创建生物体。

本文中小编为大家介绍三种Organisms

HeaderOrganism

<template>
  <header class="component-wrapper" data-name="headerOrganism">
    <LogoAtom width="60" />
    <SearchFormMoecules />
  </header>
</template>

<script>
import SearchFormMoecules from "https://codepen.io/haroonth/pen/zYMmjqa.js";
import LogoAtom from "https://codepen.io/haroonth/pen/xxQMbeJ.js";
export default {
  components: { SearchFormMoecules, LogoAtom }
};
</script>
<style scoped>
header {
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

ContentOrganism

<template>
  <div class="page-organism">
    <div class="content-wrapper-title">
      <h1><slot name="title">Here might be a page title</slot></h1>
      <p><slot name="description">Here might be a page description</slot></p>
    </div>
    <slot>...</slot>
    <!--   This might includes some molecules or atoms   -->
  </div>
</template>
<script>
export default {
  name: "ContentOrganism",
  components: {}
};
</script>
<style scoped>
.page-organism {
  padding-top: 50px;
  padding-bottom: 80px;
  box-shadow: inset 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.content-wrapper-title {
  text-align: center;
}
</style>

FooterOrganism

<template>
  <footer class="component-wrapper" data-name="footerOrganism">
    <CopyrightAtom />
    <SubscribeFormMoecules />
  </footer>
</template>

<script>
import SubscribeFormMoecules from "https://codepen.io/haroonth/pen/ExOrarL.js";
import LogoAtom from "https://codepen.io/haroonth/pen/xxQMbeJ.js";
import CopyrightAtom from "https://codepen.io/haroonth/pen/gOQqOBj.js";
export default {
  components: { SubscribeFormMoecules, LogoAtom, CopyrightAtom }
};
</script>
<style scoped>
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

模板 Templates

模板是通过指定生物在区域内的位置和大小（例如页眉、页脚和内容区域）来定义页面布局和组成的结构，下面是它的外观：

<template>
  <div class="full-layout-template">
    <HeaderOrganism />
    <ContentOrganism class="content">
      <template #title>
        <slot name="title">default title</slot>
      </template>
      <template #description>
        <slot name="description">default description</slot>
      </template>
      <slot />
    </ContentOrganism>
    <FooterOrganism class="page-footer" />
  </div>
</template>
<script>
import HeaderOrganism from "https://codepen.io/haroonth/pen/WNYaJGR.js";
import ContentOrganism from "https://codepen.io/haroonth/pen/vYQbOeO.js";
import FooterOrganism from "https://codepen.io/haroonth/pen/RwqvPRN.js";
export default {
  name: "FullLayoutTemplate",
  components: {
    HeaderOrganism,
    ContentOrganism,
    FooterOrganism
  }
};
</script>
<style scoped>
.full-layout-template {
  display: flex;
  flex-direction: column;
  min-height: 90vh;
}
.content {
  flex: 1 0 auto;
}
.page-footer {
  flex-shrink: 0;
}
</style>

页面 Pages

页面是将模板与特定内容组合以形成完整视图的 UI 的最终呈现形式。在原子设计中，页面就像模板的实例，代表用户的独特体验。

在 Vue.js 中，可以通过复制模板并将其插槽替换为实际内容来创建页面。虽然，在这个例子中，小编只更改内容有机体的内容，但您可以选择更改所有内容或不更改任何内容。

<template>
  <FullLayoutTemplate>
    <template #title>{{ title }}</template>
    <template #description>{{ description }}</template>
    <div class="fixed-width">
      <FormMolecule nameLabel="Name" emailLabel="Email" submitLabel="Save" />
    </div>
  </FullLayoutTemplate>
</template>
<script>
import FullLayoutTemplate from "https://codepen.io/haroonth/pen/GRwzpxx.js";
import FormMolecule from "https://codepen.io/haroonth/pen/PoxyRMo.js";
export default {
  name: "HomePage",
  components: {
    FullLayoutTemplate,
    FormMolecule
  },
  data() {
    return {
      title: "Welcome to my example",
      description: "This is an example of Atomic Design in Vue.js",
      copyright: "Copyright © 2023"
    };
  }
};
</script>
<style scoped>
* {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
.fixed-width {
  max-width: 350px;
  margin: 0 auto;
}
</style>

总结：在 Vue.js 中原子设计的好处

通过在 Vue.js 中使用原子设计，你可以实现几个好处，例如

  • 一致性：通过创建可重用的组件，可以确保 UI 在所有页面上的外观和行为一致。
  • 可伸缩性：通过将 UI 分解为小块，可以轻松添加、删除或更新组件，而不会影响系统的其他部分。
  • 可维护性：通过将组件组织到文件夹和文件中，您可以轻松查找、编辑或调试它们，并与系统的其他部分隔离。
  • 可重用性：通过创建独立组件，您可以在其他项目中重用它们或与社区共享它们，从而节省时间和精力。

原子设计是一种强大的方法，可以帮助你在 Vue.js 中设计更好的 UI。通过遵循其原则，您可以创建可重用、模块化和可扩展的组件，使您的代码更易于维护，用户更满意。

扩展链接：

新手入门-在Vue框架中嵌入前端Excel表格插件

新手入门 – 在Angular15中集成报表插件

基于分支的版本管理，帮助低代码从项目交付走向定制化产品开发

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1180248.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

10-27 maven概念

10-27 maven概念

maven maven的概念模型: 项目对象模型(POM: Project object Model)&#xff0c;一组标准集合: pom.xml 依赖管理系统(Dependency Management System) 项目生命周期(Project Lifecycle) 项目对象模型&#xff1a; 把项目当成一个对象&#xff0c;描述这个项目&#xff0c;使用p…
阅读更多...
[CISCN 2023 初赛]go_session

[CISCN 2023 初赛]go_session

文章目录 考点代码审计main.goroute.goIndex函数Admin函数Flask函数 解题过程伪造session获取server.py构造payload覆盖server.py命令执行 考点 session伪造&#xff0c;pongo2模板注入&#xff0c;debug模式覆盖源文件 代码审计 main.go package mainimport ("github.c…
阅读更多...
解决：ImportError: cannot import name ‘get_config‘

解决：ImportError: cannot import name ‘get_config‘

解决&#xff1a;ImportError: cannot import name ‘get_config’ 背景 今天使用Conda构建项目运行环境的时候报错&#xff1a;ImportError: cannot import name ‘get_config’ ##报错问题 from keras.callbacks import LearningRateScheduler, ModelCheckpointFile "D…
阅读更多...
计算机毕设 基于大数据的高校校园学生一卡通数据分析

计算机毕设 基于大数据的高校校园学生一卡通数据分析

文章目录 0 项目简介任务 1数据导入与预处理任务 1.1 探查数据质量并进行缺失值和异常值处理1.1.2检查重复值1.1.3数据内容总览1.1.4数据分布总览1.1.5消费金额和消费次数观察消费金额和消费次数的散点图1.1.6观察 CardCount 特征的分布情况 任务2 食堂就餐行为分析任务 2.2 食…
阅读更多...
1.IntelliJ-IDEA修改CobaltStrike

1.IntelliJ-IDEA修改CobaltStrike

IntelliJ-IDEA修改CobaltStrike 前期准备一、创建一个新项目二、创建一个lib目录三、重构代码四、运行效果 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均…
阅读更多...
奔驰E Coupe 升级鼠标按键 操作简单 完美结合

奔驰E Coupe 升级鼠标按键 操作简单 完美结合

人机交互系统正是汽车智能化发展的产物&#xff0c;它实现了人与车之间的互联。不知道大家有没有发现&#xff0c;在很多奔驰车的中央扶手箱前&#xff0c;有一块类似于“鼠标”的操作区&#xff0c;它并不是我们常见的换挡杆&#xff0c;而是奔驰研发的独立影音控制系统COMAND…
阅读更多...
监控actuator配置以及踩坑记录

监控actuator配置以及踩坑记录

以前这个监控都是领导去加&#xff0c;我顶多去修改一些时间参数&#xff0c;让我自己加还是头一次 正经踩了不少坑啊 1.依赖引入 先说配置过程 不对 先说我们项目结构 我们有一个common项目&#xff0c;作为一个公共项目。各种项目公用的依赖&#xff0c;都配置在common中…
阅读更多...
Cassandra介绍（二）

Cassandra介绍（二）

1.8. 数据 存储 &#xff08; CommitLog、MemTable、SSTable &#xff09; 写请求分别到 CommitLog 和 MemTable, 并且 MemTable 的数据会刷写到磁盘 SSTable 上. 除 了写数据,还有索引也会保存到磁盘上. 先将数据写到磁盘中的 commitlog&#xff0c;同时追加到中内存中的数据…
阅读更多...
物理机安装CentOS7

物理机安装CentOS7

准备阶段 一个需要安装版本的iso镜像文件一个U盘一台物理机一台有windos系统的电脑 制作启动盘 下载UltraISO &#xff08;收费 搜一搜可以解决&#xff09; 写入硬盘映像 先格式化&#xff0c;选择usb-hdd v2 写入 可能会卡 耐心等待 安装系统 插入u盘 进入 启动项选择页…
阅读更多...
python使用selenium做自动化，最新版Chrome与chromedriver不兼容

python使用selenium做自动化，最新版Chrome与chromedriver不兼容

目前Chrome版本是118.0.5993.118 下方是版本对应的下载地址&#xff1a; chrome版本118&#xff1a; https://download.csdn.net/download/qq_35845339/88510476 chrome版本119&#xff1a; chromedriverlinux64https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testin…
阅读更多...
台式电脑一键重装Win10系统详细教程

台式电脑一键重装Win10系统详细教程

很多用户都在使用台式Win10电脑办公&#xff0c;如果电脑出现系统问题无法解决了&#xff0c;这时候就可以考虑给电脑重装系统哦&#xff0c;下面小编给大家详细介绍关于台式电脑一键重装Win10系统的步骤方法&#xff0c;安装后电脑就能恢复正常&#xff0c;也不会影响到用户的…
阅读更多...
新生儿长牙期：原因、科普和注意事项

新生儿长牙期：原因、科普和注意事项

引言&#xff1a; 新生儿长牙期是新父母关心的话题之一&#xff0c;因为它标志着婴儿开始生长乳牙。尽管这个过程在每个婴儿身上都会发生&#xff0c;但它可能引起不适和不安。本文将科普新生儿长牙的原因&#xff0c;提供相关信息&#xff0c;并为父母和监护人提供注意事项&a…
阅读更多...
lazarus：数据集快速导出为excel、csv、sql及其他多种格式

lazarus：数据集快速导出为excel、csv、sql及其他多种格式

lazarus被成为快速开发工具&#xff0c;为什么说“快速”&#xff0c;重要的一点是&#xff0c;很多工具是现成的&#xff0c;可以拿来直接就用。比如数据导出&#xff0c;如果需要把数据集导出为excel格式文件&#xff0c;写代码可能需要很多时间。lazarus就不用了&#xff0c…
阅读更多...
Python学习笔记--类的访问控制

Python学习笔记--类的访问控制

九、类的访问控制 1、类属性的访问控制 在 Java 中&#xff0c;有 public &#xff08;公共&#xff09;属性 和 private &#xff08;私有&#xff09;属性&#xff0c;这可以对属性进行访问控制。 那么在 Python 中有没有属性的访问控制呢&#xff1f; 一般情况下&#x…
阅读更多...
基于SSM的大学学生成长系统

基于SSM的大学学生成长系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…
阅读更多...
5+单基因泛癌范文式教学，适合小白学习

5+单基因泛癌范文式教学，适合小白学习

今天给同学们分享一篇生信文章“Comprehensive Pan-Cancer Analysis of KIF18A as a Marker for Prognosis and Immunity”&#xff0c;这篇文章发表在Biomolecules期刊上&#xff0c;影响因子为5.5。 结果解读&#xff1a; KIF18A的表达及其在泛癌中的诊断价值 TIMER数据库被…
阅读更多...
操作系统：虚拟存储管理技术

操作系统：虚拟存储管理技术

文章目录 虚拟存储管理技术一、实验目的二、实验要求与内容、过程与结果 系列文章 虚拟存储管理技术 一、实验目的 存储管理的主要功能之一是合理地分配空间。请求页式管理是一种常用的虚拟存储管理技术。 本实验的目的是通过请求页式存储管理中页面置换算法模拟设计&#xf…
阅读更多...
wpf Grid布局详解 `Auto` 和 `*` 是两种常见的设置方式 行或列占多个单元格，有点像excel里的合并单元格。使其余的列平均分配剩余的空间

wpf Grid布局详解 `Auto` 和 `*` 是两种常见的设置方式 行或列占多个单元格，有点像excel里的合并单元格。使其余的列平均分配剩余的空间

比如只有行的界面 <Window x:Class"GenerateTokenApp.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/exp…
阅读更多...
GoLong的学习之路（二十）进阶，语法之反射(reflect包)

GoLong的学习之路（二十）进阶，语法之反射(reflect包)

这个是为了接上之前的语法篇的。按照我的学习计划&#xff0c;这里此时应该有一个小项目来做一个统合。但是吧&#xff0c;突然觉得&#xff0c;似乎也没必要。能学go的大部分肯定都是有其他语言的基础的。 接下来说反射 文章目录 反射介绍reflect包TypeOftype name和type kin…
阅读更多...
重磅！OpenAI发布GPT-4 Turbo，史上最强ChatGPT来了！

重磅！OpenAI发布GPT-4 Turbo，史上最强ChatGPT来了！

11月7日凌晨&#xff0c;OpenAI在美国旧金山举办首届开发者大会&#xff0c;与来自全球的开发者、企业、合作伙伴分享了最新产品。 微软首席执行官Satya Nadella作为特邀嘉宾出席了此次盛会。 会上&#xff0c;OpenAI发布了128K 上下文的GPT-4 Turbo、自定义GPT、DALLE 3 API…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023