如何在Windows命令行创建HTML/CSS/JS项目模板并优化项目切换

1. 命令行自动复制模板到新文件夹 #

跨平台脚本方案（推荐） #

用Node.js写一个轻量脚本，兼容Windows/macOS/Linux：

1. 在主目录新建create-canvas-project.js，写入以下代码：

const fs = require('fs-extra');
const path = require('path');

const projectName = process.argv[2];
if (!projectName) {
  console.log('请指定项目名称，用法：node create-canvas-project.js 项目名');
  process.exit(1);
}

const templateDir = path.join(__dirname, 'projects', '!template');
const targetDir = path.join(__dirname, 'projects', projectName);

fs.copy(templateDir, targetDir)
  .then(() => console.log(`项目 ${projectName} 创建完成`))
  .catch(err => console.error('创建失败：', err));

2. 安装依赖：npm install fs-extra --save-dev
3. 创建项目：node create-canvas-project.js 我的新游戏

系统原生命令 #

• Windows（PowerShell）：
  主目录执行：

  $projectName = "我的新项目"; Copy-Item -Recurse .\projects\!template\ .\projects\$projectName\
  

• macOS/Linux（Bash/Zsh）：
  主目录执行：

  PROJECT_NAME="我的新项目"; cp -r ./projects/!template/ ./projects/$PROJECT_NAME/
  

2. 无需主index.html无缝切换项目 #

方案一：VS Code工作区 #

1. 打开VS Code，点击「文件」→「将文件夹添加到工作区」，把projects下所有项目文件夹加入
2. 保存工作区为canvas-projects.code-workspace
3. 运行项目时，直接打开目标项目的index.html，右键选择「Open with Live Server」，插件会自动为该文件启动独立服务

方案二：Live Server多实例切换 #

1. 在VS Code设置中开启「Live Server: Allow Multiple Instances」
2. 每个项目的index.html都可单独启动Live Server，端口自动递增（如5500、5501）
3. 通过VS Code底部状态栏的Live Server图标，快速切换不同端口的服务

方案三：npm脚本启动指定项目 #

1. 在主目录package.json中添加脚本：

{
  "scripts": {
    "start:project": "npx serve ./projects/$PROJECT_NAME -l 5500"
  }
}

2. 启动指定项目：
   • macOS/Linux：PROJECT_NAME=我的新项目 npm run start:project
   • Windows：set PROJECT_NAME=我的新项目 && npm run start:project

内容的提问来源于stack exchange，提问作者whycan'ticode