PureScript Halogen 项目教程

PureScript Halogen 项目教程

purescript-halogenA declarative, type-safe UI library for PureScript.项目地址:https://gitcode.com/gh_mirrors/pu/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

{

purescript-halogenA declarative, type-safe UI library for PureScript.项目地址:https://gitcode.com/gh_mirrors/pu/purescript-halogen