构建大型 Vue.js 应用程序文件结构
在启动新应用程序时,架构师或开发人员面临的常见挑战是:
如何将应用程序构建为模块化、灵活和可扩展的,
如何处理 http 调用,
如何进行状态管理,
如何添加异常处理,
如何添加日志记录,
很多时候面临这些挑战,在对社区进行研究之后,准备了一个模板来解决这些问题,并提供了一种编写模块化、灵活和可扩展的 Vue.js 应用程序的方法。
感谢 Vue CLI 3 的零配置初始设置。但是初始设置并不能解决上述问题。总是尝试将前端应用程序设计为 3 层:
UI 层——应用程序 UI 组件
业务层——包含应用程序的业务逻辑,我们通常称它们为服务
应用状态——应用状态管理
在社区中进行研究,发现了多种方式来安排项目中的文件,例如按文件夹类型和按功能文件夹。从这些中汲取了一个想法,并创建了一个适合自己需要的文件夹结构,它类似于逐个功能的文件夹,如下所示。
在根级别,这些将是使用 Vue CLI 创建的文件夹/文件。除此之外,还添加了 Vue CLI 推荐的环境文件(.env
和.env.production
),用于管理应用程序中的不同环境配置。
源文件夹:
在src
文件夹中,有一个app
文件夹,其中包含应用程序的主要源代码,此外,还有assets
、environment
、plugins
、main.js
assets
:包含静态资产/图像。environment
:它包含environment.js
文件,可以使用global
访问环境变量,process.env
但这很容易出错。所以,应该有共同点的interface
,可以通过它来访问/限制环境变量的访问。plugins
:包含所有 VUE 插件main.js
:负责引导 VUE 应用程序app
:在 app 文件夹中,将按功能拥有文件夹。它还将包含一个shared
文件夹,里面将有应用级共享components
,config
,directives
,filters
,services
等。除了这些,app
文件夹将包含 3 个文件:app-routes.js
:该文件将负责组合来自功能模块的所有路由配置,它还会有一些应用程序级别的路由,例如通配符路由。app-state.js
:所有状态管理相关的配置都会在这个文件中完成。例如,Vuex 相关配置到这里就完成了,来自不同功能模块的所有状态将在此处组合,并将与状态管理系统一起配置。app.vue
:包含应用程序主视图的根组件。
功能模块
应用程序文件夹结构根据功能划分,基本上,该功能称为功能模块。功能模块的根将包含组件及其测试和shared
文件夹。每个功能模块也将有它routes
,state
和main component
文件。例如,在user
功能模块,user-list
并且user-item
是组件,user-routes.js
包含了用户的功能模块routes
, user-state.js
将结合所有用户的状态和user.vue
为用户提供功能模块的主要成分。
共享文件夹
一个共享文件夹将位于应用程序级别,每个功能模块也将拥有自己的共享文件夹。它们之间的主要区别在于,应用程序级别的共享文件夹将包含应用程序级别的共享内容,而模块级别的共享文件夹将包含模块级别的共享内容。
components
此文件夹将包含共享组件。将共享到不同功能模块或组件中的组件。例如:页眉、页脚、导航等。
config
将包含api
相关配置、配置常量等配置。
directives
包含共享指令。应用级共享文件夹将包含应用级共享指令,模块级共享文件夹将包含模块级共享指令。
filters
包含共享过滤器。应用级共享过滤器将在应用级共享文件夹中,模块级共享过滤器将在模块共享文件夹中。
services
包含独立于 UI 逻辑的业务逻辑或实用程序或 http
调用。大多数人称他们为utils
或helpers
或services
。
state
应用级共享文件夹将包含可在不同功能模块之间共享的状态。功能模块级共享文件夹将具有功能模块状态。应用级共享状态的主要原因是,让我们假设,我们将实现延迟加载并将应用程序的所有状态放入功能模块中。假设有一部分状态可共享到多个功能模块中,那么如果未加载作为状态所有者的特定功能模块,则其他功能模块将无法使用它。为了解决此类问题,此类状态将成为应用程序共享状态而非功能状态的一部分。因此,这就是为什么功能模块将具有可共享到该功能模块中的状态,而应用程序级别的共享状态将成为应用程序共享状态的一部分。
总结
最后,不是说它会解决所有问题,但这是解决了关于项目文件夹结构的问题,正如人们常说的文件夹结构永远不会一成不变,当项目的大小和复杂性增加时,总是需要重构。
版权声明: 本文为 InfoQ 作者【devpoint】的原创文章。
原文链接:【http://xie.infoq.cn/article/15f2149b17b723dd4a47df393】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论