关于前端:有意义的前端应用程序文件夹结构

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器，ChatGPT4 已上线 https://cube.waixingyun.cn/home

对于大规模利用来说，最要害也最具挑战性的方面之一就是良好且正当的文件夹构造。在思考将代码库合成为应用微前端的多个利用之前，有一些步骤能够遵循，以在我的项目级别改良架构，并使过渡更加容易，如果你已经思考过这条门路的话。

指标是利用某种模块化，通过在性能之间设定边界并最小化代码耦合和副作用，使代码库更易于了解。

默认我的项目构造

默认状况下，当应用某个风行的前端框架搭建新我的项目时，组件构造是平坦的，齐全不遵循任何层次结构。

• assets 目录用于存储整个应用程序中应用的动态资源，如图片、字体和 CSS 文件。
• components 目录蕴含可重用的 Vue 组件，倡议应用扁平化的层次结构。
• main.js 文件作为应用程序的入口点，使得 Vue 初始化和插件或附加库的配置成为可能。
• App.vue 文件代表了咱们应用程序的根组件，它充当其余组件的容器，并作为主模板提供服务。

咱们曾经粗浅体验到，对于大型项目来说，这种架构很快就会失控。咱们须要某种模块化，以便可能轻松定位特定文件，设定性能之间的边界，并防止组件之间的严密耦合。

将应用程序合成为多个性能

任何大型应用程序都会被拆分为多个独立的性能。辨认它们并不总是容易和间接的，但随着工夫和教训的积攒，这个过程会变得更好。让咱们一起尝试将一个风行的应用程序合成为各个局部作为练习。

推特的主页内容丰富多彩。页面的外围局部是工夫线，四周围绕着许多性能，如导航、推文创立区域、带有多个子组件的侧边栏、浮动音讯组件等等。

将形成这些性能的所有组件放在同一个文件夹中是无奈保护的，即便应用 IDE 的疾速查找选项，要找到其中的一个也会十分艰难。

一个更具体的我的项目构造

依据教训，一个更好且更全面的文件构造应该是这样的：

• components : 所有在整个应用程序中应用的共享组件。
• composables : 所有共享的可组合部件。
• config : 应用程序配置文件。
• features : 蕴含所有的应用程序性能。咱们心愿将大部分的利用程序代码保留在这里。
• layouts : 页面的不同布局。
• lib : 咱们利用中应用的各种第三方库的配置。
• pages : 咱们应用程序的页面。
• services : 共享的应用服务和提供商。
• stores : 全局状态存储。
• test : 与测试相干的模仿、助手、实用程序和配置。
• types : 共享的 TypeScript 类型定义。
• utils : 共享的实用功能。

须要留神的三件重要事项：

• Pages 文件夹自身就曾经在肯定水平上实现了模块化，无论是在上下文方面还是在像 webpack 或 Vite 这样的构建工具会创立的理论块方面。将所有页面放在一个中央十分有帮忙，然而它们外部的逻辑应该尽量简化。
• 为了更便于保护和扩大，咱们的指标是将大部分利用程序代码保留在 features 文件夹内。每个性能文件夹应蕴含给定性能的特定畛域代码。
• 在现实的世界里，咱们不应该有共享的组件、可组合的、存储和服务，所有的货色都应该在相应的个性文件夹内。可怜的是，在理论的我的项目中，这是无奈防止的，但咱们应该提前布局，并在向这些文件夹增加内容时分外小心

Features Folder 性能文件夹

正如咱们之前提到的，咱们的应用程序的大部分应该存在于个性文件夹中，并宰割成多个子目录。

• api : 所有的获取逻辑都在这里，这使得 API 和 UI 解耦。
• components : 特定性能的组件。
• composables : 特定性能的可组合项。
• stores : 状态治理代码，咱们期待并实际上激励有多个子模块。
• types : 特定性能的 TypeScript 类型定义。
• index.ts : 这是性能的入口点。它作为性能的公共 API 进行操作，只应导出应用程序的其余局部应公开的内容。

上述的 index.ts 文件作为每个性能的公共 API。当从另一个畛域导入某些内容时，应仅通过此文件进行。这应该能够避免循环依赖，并且也使得找到导入源更为容易。

# Bad 🚫 🚫 🚫
import {UserProfile} from '@/features/profile/components/UserProfile.vue'

# Good ✅ ✅ ✅
import {UserProfile} from '@/features/profile'

咱们能够通过应用 no-restricted-imports ESLint 规定来执行这种模式。

rules: {
    'no-restricted-imports': [
      'error',
      {patterns: ['@/features/*/*'],
      },
    ],
    'import/no-cycle': 'error',
    ...
}

总结

以个性为导向的架构是组织简单我的项目的无效且通过实战测验的形式。它使咱们可能将代码解耦为独立的模块，并随着应用程序变得更简单而扩大。这将通过进步代码库的可预测性，缩小调试工夫并使新员工入职更容易，从而晋升开发体验。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。