React-vscode-portfolio 项目启动与配置教程

1. 项目目录结构及介绍

react-vscode-portfolio 是一个以 Visual Studio Code 为灵感来源的个人信息展示网站项目。以下是项目的目录结构及其简要说明：

react-vscode-portfolio/
├── .github/                  # GitHub 相关配置
├── public/                  # 公共静态文件
│   ├── index.html            # 入口HTML页面
│   └── pages/               # Markdown 页面文件
├── src/                     # 源代码目录
│   ├── app/                 # 应用逻辑
│   │   ├── components/      # 组件
│   │   ├── pages/           # 页面路由
│   │   ├── store/           # 状态管理
│   │   └── styles/          # 样式
│   ├── assets/              # 资源文件
│   ├── index.tsx            # 应用入口
│   └── App.tsx              # 应用主体
├── .dockerignore            # Docker构建忽略文件
├── .gitignore               # Git忽略文件
├── Dockerfile               # Docker构建文件
├── LICENSE.md               # 开源许可证
├── README.md                # 项目说明文件
├── docker-compose.yaml      # Docker组合定义文件
├── package-lock.json        # NPM包锁定文件
├── package.json             # NPM包配置文件
└── tsconfig.json            # TypeScript配置文件

2. 项目的启动文件介绍

项目的启动主要通过 package.json 文件中的脚本实现。以下是主要的启动脚本：

• npm start：在开发模式下启动项目，通常用于本地开发。这个脚本会启动一个本地服务器，并实时编译项目文件。
• npm run build：构建项目，用于生成生产环境的静态文件。
• npm run deploy：部署项目，可以将构建的静态文件发布到 GitHub Pages。

3. 项目的配置文件介绍

项目中有几个关键的配置文件，以下是它们的简要说明：

• .env.development 和 .env.production：环境变量文件，分别用于开发和生产环境。可以在这里配置如API密钥、第三方服务的Token等敏感信息。
• tsconfig.json：TypeScript 配置文件，定义了项目的类型检查规则和编译选项。
• package.json：NPM包配置文件，定义了项目的依赖、脚本和元数据。在 scripts 部分，可以找到启动、构建和部署项目的脚本。
• docker-compose.yaml：Docker组合定义文件，用于定义和运行多容器Docker应用。在这个文件中，可以配置项目的服务和容器。

以上是 react-vscode-portfolio 项目的目录结构、启动文件和配置文件的介绍。通过这些信息，你可以更好地理解项目结构，并根据自己的需要进行相应的配置和启动。