Arquitetura Front-end com Atomic Design
EXEMPLOS 프라티코스
Átomos: é a menor unidade que compõe nosso aplicativo.
AtomButton.vue
<template>
<a
:href="link.url"
>{{ link.name }}</a>
</template>
<script>
export default {
name: "AtomButton",
props: ["link"]
};
</script>
AtomImage.vue
<template>
<img :src="img" :alt="alt" />
</template>
<script>
export default {
name: "AtomImage",
props: ["img", "alt"]
};
</script>
AtomText.vue
<template>
<p>{{ text }}</p>
</template>
<script>
export default {
name: "AtomText",
props: ["text"]
};
</script>
AtomTitle.vue
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
name: "AtomTitle",
props: ["title"]
};
</script>
Moléculas: são grupos de átomos ligados entre si.
MoleculeBanner.vue
<template>
<div>
<header>
<AtomTitle :title="Atomic Design com Vue.js" />
<AtomText text="Um exemplo de molecula" />
<AtomButton :link="{ name: 'Button', url: '#' }"/>
</header>
</div>
</template>
<script>
import AtomTitle from "@/components/atoms/AtomTitle";
import AtomText from "@/components/atoms/AtomText";
import AtomButton from "@/components/atoms/AtomButton";
export default {
name: "MoleculeBanner",
components: {
AtomTitle,
AtomText,
AtomButton
}
};
</script>
Organismos: são grupos de moléculas unidas para formar uma seção relativamente complexa e distinta de uma interface, como o cabeçalho e o rodapé.
OrganismHeader.vue
<template>
<header>
<div>
<AtomLogo/>
<MoleculeLinks :links="links"/>
</div>
<div>
<AtomButton :link="{ name: 'Button', url: '#' }"/>
</div>
</header>
</template>
<script>
import AtomLogo from "@/components/atoms/AtomLogo";
import AtomButton from "@/components/atoms/AtomButton";
import MoleculeLinks from "@/components/molecules/MoleculeLinks";
export default {
name: “OrganismHeader",
props: ["links"],
components: {
AtomLogo,
AtomButton,
MoleculeLinks
}
};
</script>
유기체Footer.vue
<template>
<footer>
<div>
<MoleculeLinks :links="columnOneLinks"/>
</div>
<div>
<MoleculeLinks :links="columnTwoLinks"/>
</div>
</footer>
</template>
<script>
import MoleculeLinks from "@/components/molecules/MoleculeLinks";
export default {
name: “OrganismFooter",
props: ["columnOneLinks", "columnTwoLinks"],
components: {
MoleculeLinks
}
};
</script>
템플릿: Consistem principalmente em grupos de organismos e/ou moléculas para formar a estrutura comum de uma página, o que costumávamos chamar de layout.
LandingPage.vue
<template>
<section>
<OrganismHeader :links="links"/>
<div>
<MoleculeBanner/>
<div class="container">
<OrganismGrid :cards="cards"/>
</div>
</div>
<OrganismFooter
:columnOneLinks="columnOneLinks"
:columnTwoLin ks="columnTwoLinks" />
</section>
</template>
<script>
import OrganismHeader from "@/components/organisms/OrganismHeader";
import OrganismFooter from "@/components/organisms/OrganismFooter";
import MoleculeBanner from "@/components/molecules/MoleculeBanner";
import OrganismGrid from "@/components/organisms/OrganismGrid";
export default {
name: "TemplateLanding",
components: {
MoleculeBanner,
OrganismHeader,
OrganismFooter,
OrganismGrid
},
data: () => {
return {
links: […],
cards: […],
columnOneLinks: […],
columnTwoLinks: […]
};
}
};
</script>
이제 IDE에서 시각적으로 볼 수 있습니다.
Deixo aqui meu egithub .
Reference
이 문제에 관하여(Arquitetura Front-end com Atomic Design), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/stefanyrepetcki/arquitetura-front-end-com-atomic-design-1iek텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)