用Stagehand搭建纯Dart网页应用：web-simple模板快速入门指南-平芜编程栈

用Stagehand搭建纯Dart网页应用：web-simple模板快速入门指南

【免费下载链接】stagehandDart project generator - web apps, console apps, servers, and more.项目地址: https://gitcode.com/gh_mirrors/sta/stagehand

如果你想用纯Dart写网页应用，Stagehand的web-simple模板是最快的起点。Stagehand是一款经典的Dart项目生成器，只需一条命令就能生成完整的项目骨架；而web-simple正是其中"零依赖、零框架"的最简网页应用模板，只用Dart核心库就能跑起来。本文将带你快速入门，从安装、生成项目到跑通第一个纯Dart网页应用，全程无需引入任何第三方框架。

一、Stagehand是什么：专为Dart开发者打造的项目生成器

Stagehand是一个命令行工具，作用是根据预设模板快速生成各类Dart项目的目录结构和基础代码。它内置了7种生成器，覆盖常见场景：

console-simple / console-full：命令行应用
package-simple：纯Dart包
server-shelf：基于Shelf的服务器
web-simple：最简网页应用
web-angular：AngularDart网页应用
web-stagexl：StageXL游戏应用

这7个生成器都在 stagehand.dart 中被统一注册，核心的生成逻辑则由 cli_app.dart 驱动。开发者只需指定生成器名称，就能一键获得规范的项目骨架。

💡 补充说明：Stagehand项目已停止维护，其功能已并入Dart SDK自带的dart create命令。不过它的模板设计理念和代码结构依然是学习Dart项目组织的极佳参考。

二、认识web-simple模板：纯Dart网页应用的最小骨架

web-simple被官方定义为"Bare-bones Web App"，即"极简网页应用"，它的生成器描述是"只使用Dart核心库的网页应用"。这意味着你不需要接触Angular、React等框架，就能用最纯粹的Dart代码完成一个可运行的网页。

它的实现代码非常精简，整个生成器逻辑集中在 web_simple.dart 中，总共只有20多行。

生成的模板只有5个文件，结构一目了然：

文件	作用
pubspec.yaml	包配置，声明依赖
web/index.html	页面入口HTML
web/main.dart	Dart主程序
web/styles.css	页面样式
analysis_options.yaml	静态分析规则

三、最快配置方法：用Stagehand生成纯Dart网页项目

以下是完整的快速入门步骤，照着操作即可。

第1步：安装并准备环境

确保本机已安装Dart SDK，然后通过全局激活方式安装Stagehand：

pub global activate stagehand

如果使用dart create，则无需安装任何额外工具，SDK自带。

第2步：一条命令生成web-simple项目

新建项目目录并进入，然后执行：

mkdir my_web_app cd my_web_app stagehand web-simple

命令执行后，终端会显示每个写入的文件路径，并在最后提示pub get安装依赖。依赖中主要包括build_runner和build_web_compilers，用于把Dart代码编译成浏览器可运行的JavaScript。

🎯 提示：Stagehand会自动把当前目录名转换为合法的包名（例如my_web_app会转为my_web_app），命名规则见 common.dart 中的normalizeProjectName。

第3步：本地运行你的纯Dart网页应用

先拉取依赖，再启动开发服务器：

pub get pub global run webdev serve

浏览器打开http://localhost:8080，就能看到页面显示 "Your Dart app is running."，你的第一个纯Dart网页应用已经成功跑起来了！

四、模板核心文件解析：三分钟看懂网页应用骨架

1. 页面入口 web/index.html

HTML骨架极其简洁，只有一个<div id="output">输出容器，外加一行加载编译后脚本的标签：

<div id="output"></div> <script defer src="main.dart.js"></script>

注意脚本是main.dart.js，这正是build_web_compilers把 web/main.dart 编译后的产物。

2. 主程序 web/main.dart

整个应用的Dart代码只有5行，逻辑再简单不过：

import 'dart:html'; void main() { querySelector('#output')?.text = 'Your Dart app is running.'; }

它演示了纯Dart网页开发的两个核心点：通过dart:html库操作DOM，以及main()作为应用入口函数。

3. 样式文件 web/styles.css

样式表引入了Roboto字体，并对#output容器做了简单的居中排版。如果你要扩展页面，只需在这里补充CSS规则。

五、动手改造：从静态文本到动态纯Dart应用

模板默认只输出一行静态文本，稍微改几行代码，就能让它变成动态应用。例如给页面添加一个按钮和点击计数逻辑：

import 'dart:html'; void main() { var count = 0; final output = querySelector('#output')!; output.text = '点击次数：0'; final button = ButtonElement() ..text = '点我' ..onClick.listen((_) => output.text = '点击次数：${++count}'); document.body!.append(button); }

保存后刷新页面即可看到效果。这一小段代码展示了dart:html库中元素创建、事件监听等常用能力——不依赖任何框架，纯Dart就能完成交互逻辑。