创建易于维护的现代Web应用程序文件夹结构的指南

在开发Web应用程序时创建可维护的文件夹结构非常重要，正确的文件放在正确的文件夹中有助于组织您的代码，并让其他开发人员了解您的Web应用程序的架构是什么样子的，或者将在开发过程中变成什么样子。在这篇文章中，我将解释一些在构建现代Web项目时使用的文件夹名称。

维护一个良好组织的文件夹结构对于开发Web应用程序非常重要，即使在独自工作或拥有有限资源时，这可能不是您首先考虑的事情。如果不这样做，您会冒着显得不专业的风险。

以下是设计您的文件夹结构的一些提示：

• 了解您的Web项目的目的：为了找出如何组织您的Web项目，您需要建立一个良好的了解，根据您正在尝试组织的资产数量和Web应用程序中的功能。

• 为您的文件夹和文件使用适当的命名约定，它们应该描述您的Web应用程序中的目的。

文件夹结构及其解释

资产（Assets）

资产文件夹包含您的Web应用程序中将使用的所有图像、图标、CSS文件、字体文件等。自定义图像、图标、付费字体都放在这个文件夹中。

上下文（Context）

当使用React Js作为您首选的前端UI库时，上下文文件夹存储所有React上下文文件，这些文件在组件和多个页面中使用。

延伸阅读：什么是上下文文件？

上下文文件通常指在编程中使用的上下文对象，例如在React应用程序中使用的上下文对象，用于在组件之间共享数据。上下文文件通常定义了一个上下文对象，其中包含可以在组件中共享的数据和方法。这些上下文对象可以使组件之间更容易地共享数据，而无需将数据一层层地传递到嵌套的组件中。

组件（Components）

组件文件夹保存您的应用程序的UI。它包含所有UI组件，如导航栏、页脚、按钮、模态框、卡片等。

可组合（Composables）

在Vue应用程序的上下文中，“可组合”是一个函数，利用Vue的组合API来封装和重用有状态的逻辑。

数据（Data）

数据文件夹用于存储文本数据，这些数据将作为JSON文件在不同的部分和页面中使用。这样做将使更新信息变得更容易。

特性（Features）

该文件夹包含每个页面的单独特性文件夹（如身份验证、主题、模态框）。例如，每个页面可能都有一个模态框特性。

钩子（Hooks）

钩子是允许您从函数组件中“挂钩”React状态和生命周期特性的函数。我们也可以创建自定义钩子，其名称以'use'开头，并可用于调用其他钩子。

布局（Layouts）

当定义网页的一般外观和感觉时，布局文件夹非常有用。它用于放置基于布局的组件，例如侧边栏、导航栏和页脚。如果您的Web应用程序有许多布局，则此文件夹是保存它们的好地方。

模块（Modules）

模块文件夹处理应用程序中的特定任务。

页面（Pages）

页面目录包含您的Web应用程序视图。像Next Js和Nuxt Js这样的前端框架中的页面目录会读取目录中的所有文件，并自动为您创建路由配置。

公共（Public）

公共目录直接在服务器根目录下提供服务，包含不会更改的公共文件，例如favicon.ico。

路由（Routes）

路由文件夹是您的Web应用程序中存储到不同屏幕的路由路径的位置。

实用程序（Utility/Utils）

这个文件夹用于存储所有实用函数，例如auth、theme、handleApiError等。

视图（Views）

视图文件夹就像页面文件夹一样，用于正确表示您的页面，以便用户可以前后导航。

结论

一个良好的文件夹结构可以让您和其他开发人员更快地找到文件并更轻松地管理它们。一个组织良好的文件夹结构可以让您看起来更专业。

今天的分享就到这里，感谢你的阅读，希望能够帮助到你，文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多有需要的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

原文：
https://dev.to/noruwa/folder-structure-for-modern-web-applications-4d11

作者：Obaseki Noruwa

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正