feat: 添加前端项目基础配置和阶段示例

添加 .editorconfig 配置文件用于统一编辑器设置,包括缩进风格、
换行符、字符集等规范。

添加 jsconfig.json 配置文件用于 JavaScript 项目的编译选项,
启用类型检查和模块解析配置。

添加 stage00 到 stage03 四个阶段的 HTML 和 JavaScript 示例:
- stage00: 基础 HTML 结构演示
- stage01: 纯命令式 DOM 操作实现用户卡片
- stage02: 声明式渲染方式重构用户卡片生成
- stage03: 扩展支持列表渲染多个用户数据

每个阶段都包含对应的 HTML 入口文件和 JavaScript 实现逻辑,
逐步展示从命令式到声明式渲染的演进过程。
This commit is contained in:
zzy
2026-05-02 12:16:03 +08:00
commit fc87cf4622
9 changed files with 196 additions and 0 deletions

12
stage01/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stage 01 - 命令式 DOM</title>
</head>
<body>
<div id="minivue"></div>
<script src="./index.js"></script>
</body>
</html>

24
stage01/index.js Normal file
View File

@@ -0,0 +1,24 @@
/**
* Stage 01纯命令式 DOM 操作
* 每一步都直接创建、组装、插入节点
*/
const card = document.createElement("div");
card.className = "user-card";
const nameEl = document.createElement("h2");
nameEl.textContent = "姓名: 小明";
const ageEl = document.createElement("p");
ageEl.textContent = "年龄: 18";
const tagEl = document.createElement("span");
tagEl.textContent = "学生";
card.appendChild(nameEl);
card.appendChild(ageEl);
card.appendChild(tagEl);
const root = document.getElementById("minivue");
console.assert(root != null, "容器 #minivue 未找到");
root.appendChild(card);