当前位置：首页 > 科技 > 软件

一个合理的前端应用文件结构

来源：责编：时间：2024-06-28 17:15:51 95观看

导读在大型应用中，最关键且最具挑战性的方面之一就是拥有一个良好且合理的文件结构。在考虑通过微前端将代码库拆分成多个应用之前，可以遵循一些步骤来改善项目级别的架构，并在您考虑这一路径时使过渡更容易。我们的目标是应

在大型应用中，最关键且最具挑战性的方面之一就是拥有一个良好且合理的文件结构。在考虑通过微前端将代码库拆分成多个应用之前，可以遵循一些步骤来改善项目级别的架构，并在您考虑这一路径时使过渡更容易。

我们的目标是应用某种模块化方法，使代码库更容易理解，通过为各个功能设置边界，减少代码耦合和副作用。

默认项目结构

默认情况下，当使用流行的前端框架之一搭建新项目时，组件结构是扁平的，并且没有任何层次结构。

图片

本示例使用的是 Vue 的默认项目结构，但 React 对如何将文件放入文件夹也没有意见。

这个例子使用了 Vue 的默认项目结构，但 React 也没有对如何将文件放入文件夹提出意见。

assets：存储应用中使用的静态资产，如图像、字体和 CSS 文件。
components：包含可重用的 Vue 组件。推荐使用扁平层次结构。
main.js：作为应用的入口点，启用 Vue 并配置插件或附加库。
App.vue：表示应用的根组件，作为其他组件的容器并充当主要模板。

我们通过实践发现，对于大型项目，这种架构很快就会失控。需要某种模块化方法来轻松定位给定的文件，为各个功能设置边界，并避免组件的紧密耦合。

将应用分解成多个功能

将应用分解成多个功能任何大型应用都会被分解成多个独立的功能。识别它们并不总是容易和直接的，但经过一段时间和经验之后会变得更好。我们一起尝试将一个流行的应用分成多个部分作为练习。

图片

Twitter 的主页有很多内容。时间线是页面的核心，被许多功能环绕，如导航、推文创建部分、带有多个子组件的侧边栏、悬浮消息组件等。

图片

将构成这些功能的所有组件放在同一个文件夹中是不可维护的，即使使用 IDE 的快速查找选项，定位其中一个组件也会非常困难。

更精细的项目结构

从经验来看，更好和更全面的文件结构如下所示：

图片

components：所有跨整个应用使用的共享组件。
composables：所有共享的 composables。
config：应用配置文件。
features：包含所有应用功能。我们希望将大部分应用代码放在这里。稍后会详细说明。
layouts：页面的不同布局。
lib：应用中使用的不同第三方库的配置。
pages：应用的页面。
services：共享的应用服务和提供者。
stores：全局状态存储。
test：与测试相关的 mock、帮助程序、工具和配置。
types：共享的 TypeScript 类型定义。
utils：共享的实用函数。
assets：静态资源。

在项目根目录下运行以下命令以创建不存在的文件夹。

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 文件夹

正如前面提到的，我们的大部分应用应该放在 features 文件夹中，分为多个子目录。

图片

api：所有的 fetch 逻辑都放在这里。这将 API 和 UI 解耦。
components：特定功能的组件。
composables：特定功能的 composables。
stores：状态管理代码。多个子模块是预期的，实际上是被鼓励的。
types：特定功能的 TypeScript 类型定义。
index.ts：这是功能的入口点。它充当功能的公共 API，并且应该只导出应该为应用程序其他部分公开的内容。

上述的 index.ts 文件充当每个功能的公共 API。在从另一个领域导入内容时，应该仅通过此文件进行。这可以防止循环依赖，并且还可以更轻松地找到导入的来源。

// 不好的做法  
                本文链接：http://www.28at.com/showinfo-26-97295-0.html一个合理的前端应用文件结构
                声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
                上一篇： 互联网配置中心设计和实践，你学会了吗？
                下一篇： RecyclerView的缓存机制及使用策略

 
			
            	标签：


        
        
        
            热门焦点
        
        
        
              
             
            
                
                
                    天猫精灵Sound Pro体验：智能音箱没有音质？来听听我的
                    
                         这几年除了手机作为智能生活终端最主要的核心之外，第二个可以成为中心点的产品是什么？——是智能音箱。  手机在执行命令的时候有两种操作方式，手和智能语音助手，而智能音箱只
                    
                
            
             
            
                
                
                    服务存储设计模式：Cache-Aside模式
                    
                        Cache-Aside模式一种常用的缓存方式，通常是把数据从主存储加载到KV缓存中，加速后续的访问。在存在重复度的场景，Cache-Aside可以提升服务性能，降低底层存储的压力，缺点是缓存和底
                    
                
            
             
            
                
                
                    一篇聊聊Go错误封装机制
                    
                        %w 是用于错误包装（Error Wrapping）的格式化动词。它是用于 fmt.Errorf 和 fmt.Sprintf 函数中的一个特殊格式化动词，用于将一个错误（或其他可打印的值）包装在一个新的错误中。使
                    
                
            
             
            
                
                
                    腾讯VS网易，最卷游戏暑期档，谁能笑到最后？
                    
                        作者：无锈钵来源：财经无忌7月16日晚，上海1862时尚艺术中心。伴随着幻象的精准命中，硕大的荧幕之上，比分被定格在了14：12，被寄予厚望的EDG战队以绝对的优势战胜了BLG战队，拿下了总决
                    
                
            
             
            
                
                
                    苹果公司要求三星和LG Display生产「无边框」OLED iPhone显示屏
                    
                                                据 The Elec 报道，苹果已要求其供应商为未来的 iPhone 型号开发「无边框」OLED 显示面板。苹果显然已要求三星和 LG Display 开发新的 OLED 显示面
                    
                
            
             
            
                
                
                    iQOO 11S新品发布会
                    
                                                iQOO将在7月4日19:00举行新品发布会，推出杭州亚运会电竞赛事官方用机iQOO 11S。
                    
                
            
             
            
                
                
                    iQOO Neo8 Pro即将开售：到手价3099元起 安卓性能最强旗舰
                    
                                                5月23日，iQOO如期举行了新品发布会，全新的iQOO Neo8系列也正式与大家见面，包含iQOO Neo8和iQOO Neo8 Pro两个版本，其中标准版搭载高通骁龙8+，而Pro版更
                    
                
            
             
            
                
                
                    Android 14发布：首批适配机型公布
                    
                                                5月11日消息，谷歌在今天凌晨举行了I/O大会，本次发布会谷歌带来了自家的AI语言模型PaLM 2、谷歌Pixel Fold折叠屏、谷歌Pixel 7a手机，同时发布了Androi
                    
                
            
             
            
                
                
                    北京：科技教育体验基地开始登记
                    
                        　　北京“科技馆之城”科技教育体验基地登记和认证工作日前启动。首批北京科技教育体验基地拟于2023年全国科普日期间挂牌，后续还将开展常态化登记。　　北京科技教育体验基


    
    
    
        
            最新推荐
            
				  
				 
				
					
					
						2021年注册电气工程师证书，要怎么领取？
						2023-08-13 
					
				
				 
				
					
					
						教案：掌握要点轻松做好
						2023-08-13 
					
				
				 
				
					
					
						教案：怎样写好一篇认识颜色教案
						2023-08-13 
					
				
				 
				
					
					
						学校教师岗位竞聘演讲稿
						2023-08-13 
					
				
				 
				
					
					
						销售竞聘上岗演讲稿
						2023-08-13 
					
				
				 
				
					
					
						中小学教师竞聘主任演讲稿
						2023-08-13 
					
				
				               
            
        
        
		
            猜你喜欢
            
				  
				 
                
					
					小小市集，月入百万
				
				 
                
					
					杯量大幅下滑，失去价格优势的库迪又不“香”了？
				
				 
                
					
					《2023小微夜经济报告》发布：文旅、购物和运动成今年城市夜经济黑马
				
				 
                
					
					九嶷山下，留守儿童的艺术节
				
				 
                
					
					兵马俑至西安北站开通新班线
				
				 
                
					
					饿了么“高校答题赢免单”今日启动，超百所高校进入“抢答时间”
				
				 
            
        
        
		
            热门推荐
            
				  
				 
                个人养老金制度启动实施
				 
                前10月软件业务收入同比增10%（新数据 新看点）
				 
                外媒：疗养院要变移民收容所？纽约一地居民发声抗议
				 
                国际最新研究：综合陆地和海洋保护可支撑珊瑚礁应对“热浪”
				 
                国际最新研究：海洋漂浮塑料95%大于2.5厘米 存续时长或超预期
				 
                中外学者合作发现边缘冰区是大气汞的重要来源
				 
                大英博物馆馆长因藏品失窃宣布辞职
				 
                马里发生两起恐袭 致49名平民和15名士兵身亡
				 
                万通发展跨界并购背后的疑问是真的吗？
				     
            
        
		
		
            相关资讯
            
				  
				 
                
					
					把LangChain跑起来的三个方法
				
				 
                
					
					多线程开发带来的问题与解决方法
				
				 
                
					
					重估百度丨“晚熟”的百度云，能等到春天吗？
				
				 
                
					
					超级标准版旗舰！iQOO 11S全球首发iQOO超算独显芯片
				
				 
                
					
					2021中国国际消费电子博览会与青岛国际软件融合创新博览会新闻发布会隆重举行
				
				 
                
					
					北京：科技教育体验基地开始登记