Puzzle 项目教程

Puzzle 项目教程

puzzle A pluggable micro-frontend structure based on Vue and Webpack5. 基于 Vue 和 Webpack5 的可热插拔式微前端架构 项目地址: https://gitcode.com/gh_mirrors/puz/puzzle

1. 项目的目录结构及介绍

Puzzle 项目的目录结构如下：

puzzle/
├── config/
│   ├── webpack.config.js
│   └── ...
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── core/
│   ├── frames/
│   ├── puzzles/
│   └── ...
├── static/
│   ├── dll/
│   └── ...
├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── README_CN.md
├── package-lock.json
├── package.json
└── update_log.md

目录结构介绍

• config/: 包含所有打包配置文件，如 webpack.config.js。
• public/: 包含生产环境的配置文件和 HTML 模板。
• src/: 包含核心代码、基础模块代码和业务模块代码。
  • core/: 架构代码。
  • frames/: 基础模块代码，支持多个基础模块共存。
  • puzzles/: 业务模块代码，支持多个业务模块共存。
• static/: 主要用于放置静态资源，会直接复制到生产环境。
  • dll/: 第三方库和公共代码生成的文件。
• .babelrc: Babel 配置文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证。
• README.md: 项目英文介绍。
• README_CN.md: 项目中文介绍。
• package-lock.json: 锁定依赖版本。
• package.json: 项目依赖和脚本配置。
• update_log.md: 更新日志。

2. 项目的启动文件介绍

Puzzle 项目的启动文件主要位于 src/ 目录下。以下是主要的启动文件：

• src/core/index.js: 架构的入口文件，负责加载和初始化所有模块。
• src/frames/base.js: 基础模块的入口文件，负责加载和初始化基础模块。
• src/puzzles/business.js: 业务模块的入口文件，负责加载和初始化业务模块。

启动流程

1. 架构启动: src/core/index.js 作为架构的入口文件，首先加载并初始化架构代码。
2. 基础模块加载: 架构代码会根据配置加载 src/frames/ 目录下的基础模块。
3. 业务模块加载: 架构代码会根据配置加载 src/puzzles/ 目录下的业务模块。

3. 项目的配置文件介绍

Puzzle 项目的配置文件主要位于 config/ 和 public/ 目录下。以下是主要的配置文件：

• config/webpack.config.js: Webpack 打包配置文件，定义了如何打包项目。
• public/config.js: 生产环境的配置文件，定义了生产环境的相关配置。
• package.json: 项目依赖和脚本配置，定义了项目的依赖包和启动脚本。

配置文件介绍

• config/webpack.config.js:

  • 定义了项目的打包规则、入口文件、输出路径等。
  • 支持多种打包模式，如开发模式和生产模式。

• public/config.js:

  • 定义了生产环境的相关配置，如 API 地址、环境变量等。
  • 该文件在生产环境中会被加载，用于配置项目的运行环境。

• package.json:

  • 定义了项目的依赖包，如 Vue、Webpack 等。
  • 定义了项目的启动脚本，如 npm start、npm run build 等。

通过以上配置文件，Puzzle 项目可以灵活地进行开发和部署。

puzzle A pluggable micro-frontend structure based on Vue and Webpack5. 基于 Vue 和 Webpack5 的可热插拔式微前端架构 项目地址: https://gitcode.com/gh_mirrors/puz/puzzle