在大型应用中，最关键且最具挑战性的方面之一就是拥有一个良好且合理的文件结构。在考虑通过微前端将代码库拆分成多个应用之前，可以遵循一些步骤来改善项目级别的架构，并在您考虑这一路径时使过渡更容易。
我们的目标是应用某种模块化方法，使代码库更容易理解，通过为各个功能设置边界，减少代码耦合和副作用。
默认情况下，当使用流行的前端框架之一搭建新项目时，组件结构是扁平的，并且没有任何层次结构。
图片
本示例使用的是 Vue 的默认项目结构，但 React 对如何将文件放入文件夹也没有意见。
这个例子使用了 Vue 的默认项目结构，但 React 也没有对如何将文件放入文件夹提出意见。
我们通过实践发现，对于大型项目，这种架构很快就会失控。需要某种模块化方法来轻松定位给定的文件，为各个功能设置边界，并避免组件的紧密耦合。
将应用分解成多个功能任何大型应用都会被分解成多个独立的功能。识别它们并不总是容易和直接的，但经过一段时间和经验之后会变得更好。我们一起尝试将一个流行的应用分成多个部分作为练习。
图片
Twitter 的主页有很多内容。时间线是页面的核心，被许多功能环绕，如导航、推文创建部分、带有多个子组件的侧边栏、悬浮消息组件等。
图片
将构成这些功能的所有组件放在同一个文件夹中是不可维护的，即使使用 IDE 的快速查找选项，定位其中一个组件也会非常困难。
从经验来看，更好和更全面的文件结构如下所示：
图片
在项目根目录下运行以下命令以创建不存在的文件夹。
mkdir -p src/{components,composables,config,features,layouts,lib,pages,services,stores,test,types,utils,assets}需要注意的三件重要事项：
Pages 文件夹：页面文件夹已经在上下文和构建工具（如 webpack 或 Vite）将创建的实际块方面进行了一些模块化。将所有页面放在一个地方非常有帮助，但其中的逻辑应保持最低限度。
Features 文件夹：为了更容易的维护和扩展，我们希望将大部分应用代码放在 features 文件夹中。每个功能文件夹应包含特定功能的领域代码。
共享内容：在一个理想的世界中，我们不应该有共享组件、composables、stores 和 services，所有内容都应该放在相应的功能文件夹中。不幸的是，在实际项目中，这无法避免，但我们应该提前计划，并在将内容添加到这些文件夹时格外小心。
正如前面提到的，我们的大部分应用应该放在 features 文件夹中，分为多个子目录。
图片
上述的 index.ts 文件充当每个功能的公共 API。在从另一个领域导入内容时，应该仅通过此文件进行。这可以防止循环依赖，并且还可以更轻松地找到导入的来源。
// 不好的做法
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-97295-0.html一个合理的前端应用文件结构
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 互联网配置中心设计和实践，你学会了吗？
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
