本文介绍如何通过 windows 批处理脚本（.bat）快速创建标准化的前端项目结构，自动复制预设模板到指定目录，并支持灵活命名与路径定制，大幅提升 canvas 项目开发起始效率。
本文介绍如何通过 windows 批处理脚本（.bat）快速创建标准化的前端项目结构，自动复制预设模板到指定目录，并支持灵活命名与路径定制，大幅提升 canvas 项目开发起始效率。
在前端开发尤其是 Canvas 动画或游戏实践中，重复搭建 index.html、main.js、基础 CSS 结构等初始文件既耗时又易出错。与其手动复制粘贴 !template 文件夹并重命名，不如用一条命令完成：自动生成带时间戳或自定义名称的新项目目录，并注入已调试好的骨架代码。
✅ 推荐方案：纯本地批处理（无需 Git 或网络依赖）
将以下内容保存为 init-project.bat（建议放在 projects 根目录下），即可在任意 CMD 窗口中运行：
@echo off
setlocal enabledelayedexpansion
:: 检查是否传入项目名
if "%~1"=="" (
echo 错误：请指定项目名称，例如：init-project.bat 002_starfield
exit /b 1
)
set "PROJECT_NAME=%~1"
set "TEMPLATE_DIR=!template"
set "TARGET_DIR=%PROJECT_NAME%"
:: 检查模板是否存在
if not exist "%TEMPLATE_DIR%" (
echo 错误：模板目录 "%TEMPLATE_DIR%" 不存在，请先创建 !template 文件夹及其中的 index.html、main.js 等文件。
exit /b 1
)
:: 创建新项目目录并复制模板
if exist "%TARGET_DIR%" (
echo 警告：目录 "%TARGET_DIR%" 已存在，跳过创建。
) else (
echo 正在创建项目目录：%TARGET_DIR%
xcopy "%TEMPLATE_DIR%" "%TARGET_DIR%" /E /I /Y >nul
echo ✓ 模板已成功复制到 %TARGET_DIR%
)
:: 可选：自动打开 VS Code（需已安装并加入 PATH）
if exist "%TARGET_DIR%\index.html" (
code "%TARGET_DIR%"
echo → 已使用 VS Code 打开新项目。
)
? 使用方式：
在 projects 目录下打开 CMD，执行：
init-project.bat 003_pacman
即会生成 003_pacman\index.html 和 003_pacman\main.js，内容完全继承自 !template。
? 进阶提示：
- 若你希望 main.js 中自动注入当前项目名或时间戳，可在复制后添加 powershell 替换逻辑（如 powershell -Command "(Get-Content %TARGET_DIR%\main.js) -replace 'PROJECT_PLACEHOLDER', '%PROJECT_NAME%' | Set-Content %TARGET_DIR%\main.js"）；
- 为彻底避免根目录下冗余的 index.html（用于 Live Server 导航），推荐改用 VS Code 的 Live Server 多根工作区：新建 .code-workspace 文件，显式列出所有子项目路径，Live Server 将自动识别各项目内 index.html 并提供独立预览入口；
- 如需跨设备同步模板，再配合 git clone（如原答案所述）是优秀补充，但非必需——本地批处理已满足快速、离线、零依赖的核心诉求。
✨ 总结：一条命令 = 创建目录 + 复制骨架 + 自动打开编辑器。把重复劳动交给脚本，把创造力留给 Canvas 的每一帧渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
