Fourier 项目教程

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

fourier/
├── assets/
├── build/
├── content/
├── css/
├── img/
├── js/
├── promo/
├── python/
├── script/
├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── preview.png
├── template.html
└── webpack.config.js

目录结构介绍

• assets/: 存放项目资源文件。
• build/: 存放构建后的文件。
• content/: 存放页面内容的 Markdown 文件。
• css/: 存放样式文件。
• img/: 存放图片文件。
• js/: 存放 JavaScript 文件，包括交互元素的控制器和主逻辑。
• promo/: 存放推广相关文件。
• python/: 存放用于生成 JPEG 部分图像的 Python 脚本和 Jupyter Notebook。
• script/: 存放构建和生成 HTML 的脚本。
• .babelrc: Babel 配置文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目介绍和使用说明。
• package-lock.json: npm 依赖锁定文件。
• package.json: npm 项目配置文件。
• preview.png: 项目预览图。
• template.html: HTML 模板文件。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 main.js，位于 js/ 目录下。该文件负责初始化页面上的所有交互元素，并链接各个控制器。

main.js 文件介绍

• 初始化交互元素: main.js 文件中创建了各个交互元素的控制器实例，并将它们与页面上的元素进行关联。
• 事件处理: 该文件还负责处理页面上的事件，并将这些事件传递给相应的控制器进行处理。

3. 项目的配置文件介绍

webpack.config.js

webpack.config.js 是 Webpack 的配置文件，负责将所有的 JavaScript 文件合并为一个文件，并将其转换为兼容旧版浏览器的格式。

package.json

package.json 是 npm 的项目配置文件，包含了项目的依赖、脚本命令等信息。

.babelrc

.babelrc 是 Babel 的配置文件，用于配置 JavaScript 的编译选项，确保代码能够在旧版浏览器中运行。

template.html

template.html 是页面的 HTML 模板文件，包含了页面的基本结构和样式。

content/content.md

content/content.md 是页面内容的 Markdown 文件，包含了页面的主要内容。该文件会被转换为 HTML 并插入到 template.html 中。