问题标签 [atomic-design]

我正在使用 assemble.io，我想使用“原子设计”原则对所有内容进行模块化。

假设我从几个单原子开始

原子部分“标题”（a-h2-title.html）

原子部分“信息文本”（a-info-text.html）

据我了解，如果我想将这些通用组件的“实例”与一些数据一起使用，我可以在 json 文件中定义它们，如下例所示：

信息文本-example1.html

信息文本-example1.json

好的，现在我的问题是当我想定义一个分子时：

m-text-and-title.html

现在，如果我想要这个元素的“实例”

文本和标题-example1.html

如何定义对象本身（附加类）和子对象的所有数据？我希望我已经把自己说清楚了

我已经在这里看过这篇文章，但我无法根据我的情况对其进行调整谢谢您的回答

我正在使用 Vue.js 开发一个项目，并希望应用原子设计方法，但我想以集群和更智能的方式导入组件

目前

我多么希望

解决方案？我想在文件夹中放置一个 index.js

index.js 将导入所有组件并导出，所以它会像

或者

工作正常，但是这种方式还是静态的，每次新建组件，都需要添加index.js，每次删除组件，也需要从index.js中删除

我需要动态导入文件夹的所有组件

我离得越近，

但我仍在静态定义导出变量名称，我需要根据文件夹内的组件定义动态

注意：我不能使用

如果我使用上面的代码片段，我将无法以我需要的方式导入它，即：

我正在使用 nuxt.js 开发一个项目，我想实现原子设计方法

所以我目前像这样导入组件

但我需要像这样导入

我离得越近，

但我仍在静态定义导出变量名称，我需要根据文件夹内的组件定义动态

注意：我不能使用

如果我使用上面的代码片段，我将无法以我需要的方式导入它，即：

I have a components folder in nuxt.js

and inside that folder I have an index.js to export all components dynamically

so I can import perfectly as I wish

the problem is that I am defining the variables to be exported statically, fixed, so for each created component I would need to add another variable manually

I need to dynamically export the variable name

Example:

I need to export the name of already unstructured variables

Note: I can not use this export default components because I can not import like this import { ButtonStyled } from "@/components/atoms"

我正在我的项目中实现原子设计模式。只是一个简单的问题，如果我实现原子设计模式，我应该将业务逻辑放在哪个不同的阶段？

我试图vuetify v-select通过 using获得更改的值，$emit但它不起作用。我通过应用原子设计模式（原子（子组件，不与存储连接），有机体（父组件））和 vuex 存储来划分组件。我认为 $emit data 没问题，但在此过程之后任何事情都不起作用。

这是用于管理页面的新应用程序，使用vue, vuex, vuetify,原子设计连接到 API 服务器。

成分

子组件 - 在 atom 文件夹中

父组件 - 在生物文件夹中

vuex 商店

index.js

xxx.js

它不会在changeSelected函数后打印任何控制台日志。

我正在为我的项目使用Gatsby (React)。我正在使用原子设计文件夹结构，例如：

在这个文件夹中，我喜欢：

我如何header.js从内部导入src/components/layout.js：

代替：

更新：

我设法做到了：

• 将index.js文件添加到src/components/Organisms/Header/
• 并且export { default } from './header';在index.js

但这是最佳实践吗？

我对 react 和 redux 比较陌生。我有一个容器呈现一个呈现多个页面的单个组件，每个页面呈现多个 redux-forms。言归正传，我在同一页面上有两个表格。但由于我使用的是单个容器，因此它在 redux 中注册为通用表单名称。我已经处理了添加和编辑，但无法验证表单。如果我试图验证另一个表单会引发验证错误（必需）。我使用 reactjs atomic design(arc) redux-form

为了解决，一些代码示例将是..

我们遵循这种模式，但你明白了..

这两个表单嵌入在同一页面上，但是，为了避免冲突，我将字段命名为唯一字段，并从 onSubmit 中解构。

我知道这不是正确的或最不明智的方式，但由于交付至关重要，因此不能花太多时间。如果有人可以提供如何在这种情况下使用唯一的表单名称（必须使用单个容器）以及如何使用模式 formKey-^6-version 进行正确反应，那将很有帮助。请以您自己的模式提供完整的代码示例，我将转换为我的模式。（我希望有一种模式可以让我在每个表单中使用相同的字段名，但这不是必需的）。问题是

1.使用相同的字段名称：redux 将其识别为相同，并且键入一个字段会导致另一个字段发生变化（如您所知，这是基本行为）

2.在我的 redux 开发工具中，页面中的所有字段都已注册，而与不同的表单无关（这是合理的，因为我使用的是相同的表单名称）。但提交仅限于一种形式，所以不必费心。

提前致谢..

有一个带有图像、一些文本和一个播放按钮的图块（分子）。触发按钮时，应通过模态显示视频。我认为模态应该是一个有机体，但我希望模态成为瓦片的一部分，瓦片是一个分子。

modal 应该是 tile 的一部分，因为这样更容易使用。我不想总是从其他有机体、模板或视图内部将它们连接起来。

我应该将模态制作成分子还是应该将瓷砖制作成有机体？

有什么建议吗？

是否建议在原子设计中使用角度？

“关于创建设计系统已经谈了很多，其中大部分都集中在为颜色、排版、网格、纹理等建立基础。这种类型的思维当然很重要，但我对这些方面不太感兴趣设计，因为最终它们是并且将永远是主观的。最近我对我们的界面由什么组成以及我们如何以更有条理的方式构建设计系统更感兴趣“，Brad Frost。