1. 模块化开发
在 Vue.js 项目中，模块化开发是一种常见的做法，旨在将代码拆分成多个更小、更易于管理和维护的模块。这种模块化通常体现在应用中，通过将功能拆分成多个组件、Vuex 模块或路由模块等，从而提高了代码的可读性和可维护性。然而，这种模块化通常局限于应用的代码结构和组织上，模块间的分隔更多的是一种形式上的划分，模块依然需要与应用一起开发、维护和部署。
另外，目前所谓的模块复用，实际上多表现为源码层面的复制，即将功能模块直接复制到不同的项目中。这种做法虽然在短期内可以减少开发工作量，但缺乏有效的机制来实现模块的独立开发、运行、测试、发布和安装。这意味着模块之间的依赖关系仍然紧密耦合，开发者无法像在一个独立的生态系统中一样，方便地进行模块的单独更新和管理。
因此，真正的模块化开发，应该具备模块能够在不同项目中独立开发、测试和发布的能力，同时允许模块之间的无缝集成和灵活的版本管理。这需要通过模块化构建工具、包管理工具（如 npm 或 yarn）、以及适当的模块发布和安装机制来实现。
本平台实现了真正的模块化开发，突破了传统模块在应用中仅限于形式化分隔的局限。通过独立的模块开发、测试、发布和安装机制，使得每个模块都可以独立运行和管理。模块不仅可以在不同的项目中复用，还能进行单独的版本控制和更新，而无需依赖应用的更新周期。 这种模块化开发方式通过解耦模块间的依赖关系，使得每个模块都能够独立生命周期管理，从而提高了开发效率和灵活性。同时，平台提供了便捷的模块发布机制，开发者可以轻松发布模块并将其安装到其他应用中，支持更高效的跨项目协作与模块共享。
总的来说，本平台实现的模块化机制不仅简化了模块的复用过程，还大大提升了系统的可扩展性和维护性，为开发者提供了一个更加高效、灵活的开发环境。
1.1. 模块定义
VIP3 平台的模块不是 JavaScript 的模块（AMD、UMD、ESM），也不是 Vue 的功能组件，而是大颗粒度的业务模块。 它包含实现一个业务场景的所有代码（js、scss、vue）和静态资源（图标）。
VIP3 平台推荐的模块目录结构为：
xxx-module
├── assets
│ ├── icon
│ │ ├── xx1.svg
│ │ └── xx2.svg
│ ├── image
│ │ ├── xx1.jpg
│ │ └── xx2.png
│ └── style
│ ├── xx1.scss
│ └── xx2.scss
├── model
│ ├── XX1.js
│ └── XX2.js
├── service
│ ├── xx1-service.js
│ └── xx2-service.js
├── view
│ ├── XX1.vue
│ └── XX2.vue
├── config.js
├── route.js
├── store.js
└── index.js
其中：
- xxx-module：业务模块名
- assets：静态资源，包含：图标、图片、样式
- model：业务模型JS文件（类或者单例的实例），提供业务领域的数据模型和行为
- service：业务服务JS文件，提供业务领域的行为，常用作和后端API交互
- view：业务视图Vue文件，提供界面
- config.js：模块的配置文件，提供默认的配置项
- route.js：模块的路由配置文件，提供 vue-router 所需的路由信息
- store.js：模块的状态配置文件（可选），提供 Vuex 所需的状态信息
- index.js：模块的入口文件，用于导出模块
命名规则：
- 以业务场景命名，而不是技术概念命名；技术命名的文件夹作为业务场景命名的子文件夹
- 能够反复实例化的文件用大写命名，如：JS类文件、Vue文件；单例的用小写，如：xx-service.js
1.2. 模块开发方式
VIP3 平台支持两种模块开发方式：
- 就地开发方式：在已有的应用中添加新的模块。开发完成后，在应用的 application.yml 中配置加载该模块即可。
- 独立开发方式：如果模块需要复用，可以新建独立的模块应用。开发完成后，安装该模块并在应用的 application.yml 中配置加载该模块即可。
为了方便开发，VIP3 平台提供了配套的命令行工具 vip3-cli ，用于创建基于 VIP3 平台的应用和模块。