构建大型 Vue.js 应用程序-CFANZ编程社区

在启动新应用程序时，架构师或开发人员面临的常见挑战是：

如何将应用程序构建为模块化、灵活和可扩展的，
如何处理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。我只是将它们称为services.

state

应用级共享文件夹将包含可在不同功能模块之间共享的状态。功能模块级共享文件夹将具有功能模块状态。应用级共享状态的主要原因是，让我们假设，我们将实现延迟加载并将应用程序的所有状态放入功能模块中。假设有一部分状态可共享到多个功能模块中，那么如果未加载作为状态所有者的特定功能模块，则其他功能模块将无法使用它。为了解决此类问题，此类状态将成为应用程序共享状态而非功能状态的一部分。因此，这就是为什么功能模块将具有可共享到该功能模块中的状态，而应用程序级别的共享状态将成为应用程序共享状态的一部分。