PureScript Halogen 项目教程
1. 项目的目录结构及介绍
PureScript Halogen 项目的目录结构如下:
purescript-halogen/
├── docs/
├── examples/
├── src/
├── test/
├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── book.toml
├── bower.json
├── build-examples.sh
├── package.json
├── packages.dhall
└── spago.dhall
目录介绍
docs/
: 包含项目的文档文件。examples/
: 包含多个自包含的示例,从基本按钮到控制外部组件。src/
: 包含项目的主要源代码。test/
: 包含项目的测试代码。.editorconfig
: 编辑器配置文件。.gitignore
: Git 忽略文件。CHANGELOG.md
: 项目变更日志。LICENSE
: 项目许可证。README.md
: 项目介绍和使用说明。book.toml
: 文档配置文件。bower.json
: Bower 包管理器配置文件。build-examples.sh
: 构建示例的脚本。package.json
: npm 包管理器配置文件。packages.dhall
: Dhall 配置文件。spago.dhall
: Spago 配置文件。
2. 项目的启动文件介绍
PureScript Halogen 项目的启动文件通常位于 src/
目录下。具体文件名和路径可能因项目结构而异,但通常会有一个入口文件,例如 Main.purs
。
示例启动文件
module Main where
import Prelude
import Effect (Effect)
import Halogen.Aff as HA
import Halogen.VDom.Driver (runUI)
import Component (component)
main :: Effect Unit
main = HA.runHalogenAff do
body <- HA.awaitBody
runUI component unit body
文件介绍
Main.purs
: 项目的入口文件,负责启动 Halogen 应用。import Prelude
: 导入 Prelude 模块,提供基本类型和函数。import Effect (Effect)
: 导入 Effect 模块,用于处理副作用。import Halogen.Aff as HA
: 导入 Halogen 的 Aff 模块,用于异步操作。import Halogen.VDom.Driver (runUI)
: 导入 Halogen 的 VDom 驱动模块,用于运行 UI。import Component (component)
: 导入组件模块。main :: Effect Unit
: 定义主函数,返回一个 Effect 类型的值。HA.runHalogenAff
: 运行 Halogen 的 Aff 环境。HA.awaitBody
: 等待 DOM 的 body 元素。runUI component unit body
: 运行 Halogen 组件。
3. 项目的配置文件介绍
PureScript Halogen 项目包含多个配置文件,以下是一些关键配置文件的介绍:
bower.json
{
"name": "purescript-halogen",
"version": "7.0.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://github.com/purescript-halogen/purescript-halogen.git"
},
"dependencies": {
"purescript-prelude": "^5.0.0",
"purescript-effect": "^3.0.0",
"purescript-console": "^5.0.0"
}
}
package.json
{
"name": "purescript-halogen",
"version": "7.0.0",
"license": "Apache-2.0",
"scripts": {
"build": "spago build",
"test": "spago test"
},
"dependencies": {
"purescript": "^0.14.0",
"spago": "^0.20.0"
}
}
spago.dhall
{