HelloWorld 主流框架教程
2026年7月1日
•
作者：admin
学习各类主流框架的 HelloWorld，本质上是同一件事：准备环境、初始化项目、写出一个最小可运行的“显示字符串”的组件或路由，然后启动并验证输出。下文按前端、后端、移动与桌面分类，给出最简实操命令、关键文件和常见陷阱，边讲原理边示例，帮你在 30 分钟内把每个框架的第一行“Hello World”跑起来，并理解背后的设计思路。
为什么从 HelloWorld 开始（费曼式解释）
用最简单的例子去理解一个系统的核心。HelloWorld 删除所有干扰，只保留“输入—处理—输出”三步：如何组织代码、如何启动、如何查看结果。掌握了这些，接下来加功能、加依赖、加测试都只是工程量的扩展，而非范式的转变。
前端：Browser / SPAs
前端框架的 HelloWorld 意味着在浏览器中渲染一段文本。关键点是组件化、虚拟 DOM（或编译输出）和构建工具链。
原生 HTML + JS（最基础）
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Hello</title>
<body>
<div id="app"></div>
<script>
document.getElementById('app').textContent = 'Hello World';
</script>
</body>
</html>React（快速启动）
用 Create React App 或 Vite 都可以。关键是组件返回 JSX。
// 命令（Vite）
npm create vite@latest my-react -- --template react
cd my-react
npm install
npm run dev
// src/App.jsx
export default function App(){
return <h1>Hello World</h1>
}
Vue 3（组合式 API）
// 命令（Vite）
npm create vite@latest my-vue -- --template vue
cd my-vue
npm install
npm run dev
// src/App.vue
<template>
<h1>Hello World</h1>
</template>
<script setup>// 空即可</script>Angular（模块化与 CLI）
// 命令
npm install -g @angular/cli
ng new my-angular
cd my-angular
ng serve
// src/app/app.component.html
<h1>Hello World</h1>Svelte（编译为原生 DOM）
// 命令（Vite）
npm create vite@latest my-svelte -- --template svelte
cd my-svelte
npm install
npm run dev
// src/App.svelte
<h1>Hello World</h1>后端：Web 服务的最小实现
后端 HelloWorld 通常是启动一个 HTTP 服务并返回简单文本。关注路由、依赖管理、运行命令。
Node.js + Express
// 初始化
npm init -y
npm install express
// index.js
const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Hello World'));
app.listen(3000, () => console.log('Listening 3000'));
// 运行
node index.jsPython Flask
pip install flask
# app.py
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello World'
if __name__ == '__main__':
app.run(port=5000)Django（最简视图）
pip install django
django-admin startproject mysite
cd mysite
python manage.py runserver
# 在某 app 的 views.py
from django.http import HttpResponse
def hello(request):
return HttpResponse('Hello World')
# urls.py 中挂载路由
path('', hello)Java Spring Boot（快速模板）
// 使用 start.spring.io 生成项目，或用 Spring Initializr
// DemoController.java
@RestController
public class DemoController {
@GetMapping("/")
public String hello(){ return "Hello World"; }
}Go（net/http）
// hello.go
package main
import (
"fmt"
"net/http"
)
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
fmt.Fprint(w, "Hello World")
})
http.ListenAndServe(":8080", nil)
}Rust（Actix-web 最简）
// Cargo.toml 添加 actix-web
// main.rs
use actix_web::{web, App, HttpServer, Responder};
async fn hello() -> impl Responder { "Hello World" }
#[actix_web::main]
async fn main() -> std::io::Result<()> {
HttpServer::new(|| App::new().route("/", web::get().to(hello)))
.bind("127.0.0.1:8080")?
.run()
.await
}移动端 HelloWorld
移动平台涉及 SDK、模拟器与真机调试，HelloWorld 帮你熟悉打包链路和平台权限。
原生 Android（Kotlin）
// MainActivity.kt onCreate 中
setContentView(R.layout.activity_main)
findViewById<TextView>(R.id.textView).text = "Hello World"iOS Swift（UIKit）
// ViewController.swift viewDidLoad
override func viewDidLoad() {
super.viewDidLoad()
let label = UILabel(frame: view.bounds)
label.text = "Hello World"
label.textAlignment = .center
view.addSubview(label)
}Flutter（跨平台）
// 命令
flutter create myapp
cd myapp
flutter run
// lib/main.dart（核心）
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Scaffold(body: Center(child: Text('Hello World')))));React Native
// 命令（使用 expo 或 react-native-cli）
npx react-native init MyApp
npx react-native run-android
// App.js
export default function App(){ return <Text>Hello World</Text> }桌面与跨平台
Electron、Tauri 等把 Web 技术带到桌面，HelloWorld 关注主进程和渲染进程的配合。
Electron 最小示例
// main.js
const {app, BrowserWindow} = require('electron');
function createWindow(){
const win = new BrowserWindow({width:800,height:600});
win.loadURL('data:text/html,<h1>Hello World</h1>');
}
app.whenReady().then(createWindow);比较表：快速查看各框架要点
| 框架 | 语言/栈 | 启动命令（简示） | 关注点 |
| React | JS/TS | npm run dev | 组件、状态管理、JSX |
| Vue | JS/TS | npm run dev | 模板/组合式 API、单文件组件 |
| Angular | TypeScript | ng serve | 模块化、依赖注入、CLI |
| Express | Node.js | node index.js | 中间件、路由 |
| Flask | Python | python app.py | 轻量、路由与 WSGI |
| Spring Boot | Java | mvn spring-boot:run | 约定优于配置、生态 |
| Flutter | Dart | flutter run | 声明式 UI、热重载 |
常见问题与调试技巧（实战派）
- 端口被占用：先确认是同进程还是残留服务，Linux/macOS 用 lsof，Windows 用 netstat 找进程并结束。
- 热重载不工作：检查构建工具是否输出错误日志，某些语法错误会阻止编译但不明显。
- 跨域（CORS）：后端 HelloWorld 要在浏览器访问 API 时添加允许来源头或用代理。
- 依赖版本冲突：对后端特别危险，使用 lock 文件（package-lock, Pipfile.lock, poetry.lock）并在 CI 中固定版本。
- 真机调试：移动平台需要正确配置证书（iOS）或启用开发者模式（Android）。
从 HelloWorld 到生产：你需要思考的额外维度
HelloWorld 好做，但生产不只是输出那句文本。你要考虑：安全（认证/授权）、可观测性（日志/监控）、配置管理（环境变量）、持续集成/持续部署（CI/CD）、性能与扩展。实现这些时，最好的策略是渐进式增强：先把最小功能做好，再逐步加入改进。举个例子——把 Express 的 HelloWorld 推到生产，你会先加个日志中间件、再配置 Nginx 反向代理、再把配置放到环境变量中、最后加上指标上报（Prometheus/Datadog 等）。
学习路径建议（小步骤、易坚持）
- 今天：选择一个前端和一个后端框架，分别跑通 HelloWorld（本地运行）。
- 明天：在前端添加一个交互（按钮点击改变文本），在后端新增一个 JSON API。
- 本周：把前后端联通（前端请求后端 API），并用 Docker 打包后端。
- 长期：熟悉测试、CI、性能调优与安全实践。
常用资源（书名与文档）
- 官方文档：React Docs、Vue Docs、Angular Docs、Flask/Django/Spring 官方指南。
- 书籍：“You Don’t Know JS”（JS 深入），“Flask Web Development”，“Spring in Action”。
- 在线教程：MDN（Web 基础）、官方快速入门（各框架都有 Quick Start）。
说到底，HelloWorld 的价值不在一句话，而在它作为对某个生态的最小探针。跑通它，你就知道工具链、错误信息和调试路径在哪里；这比盲目看文档强得多。你会发现，尽管每个框架的样子不同，但思路高度相似：初始化→实现最低功能→启动→观察输出。现在，挑一个你想用的栈，跟着上面的命令敲一遍，别怕出错，边错边改就是学习的最好方式。
相关文章
了解更多相关内容
