现代 Web 应用程序的文件夹结构

在开发 Web 应用时，创建可维护的文件夹结构至关重要。将正确的文件放在正确的文件夹中，有助于组织代码，并使其他开发人员了解 Web 应用的架构现状或开发过程中的架构。在本文中，我将解释构建现代 Web 项目时的一些文件夹名称。

在开发 Web 应用程序时，维护井然有序的文件夹结构至关重要，即使在独自工作或资源匮乏时，这或许并非首要考虑。否则，您可能会显得不够专业。

设计文件夹结构的一些技巧

• 了解您的 Web 项目的目的：为了弄清楚如何组织您的 Web 项目，您需要对您拥有的内容有一个很好的了解，这取决于您尝试组织的资产数量以及您的 Web 应用程序中的功能。
• 对您的文件夹和文件使用适当的命名约定，它们应该描述您的 Web 应用程序中的用途。

文件夹结构及其说明

Assets
文件夹包含您的 Web 应用程序中使用的所有图片、图标、CSS 文件、字体文件等。自定义图片、图标和付费字体都放在此文件夹中。

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

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

可组合项
在 Vue 应用程序上下文中，“可组合项”是一种利用 Vue 的 Composition API 来封装和重用状态逻辑的功能。

数据
文件夹用于存储文本数据，这些数据将以 JSON 文件的形式用于不同的部分和页面。这样做可以更轻松地更新信息。

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

Hooks
是一些函数，它们允许你从函数组件中“钩住” React 的状态和生命周期功能。此外，我们还可以创建以“use”开头的自定义 Hooks，用于调用其他 Hooks。

布局
在定义网页的整体外观和风格时，“布局”文件夹非常有用。它用于放置基于布局的组件，例如侧边栏、导航栏和页脚。如果您的 Web 应用程序包含许多布局，那么这个文件夹是保存它们的理想位置。

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

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

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

路线
路线文件夹只是 Web 应用程序中的一个地方，用于存储到不同屏幕的路线路径。

Utility/Utils
此文件夹用于存储所有实用功能，例如 auth、theme、handleApiError 等。

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

结论

良好的文件夹结构能让您和其他开发人员更快地找到文件并更轻松地管理它们。井然有序的文件夹结构能让您显得更专业。