react-vscode-portfolio 的安装和配置教程

2025-05-17 05:12:21作者：齐冠琰

1. 项目基础介绍和主要编程语言

react-vscode-portfolio 是一个受到 Visual Studio Code 启发的个人作品集网站项目。它允许用户创建和展示自己的个人资料，包括技能、经验、教育背景、项目、证书和成就等内容。该项目主要使用 TypeScript 作为编程语言，同时使用了 HTML 和 Dockerfile。

2. 项目使用的关键技术和框架

本项目采用以下技术和框架构建：

React.js: 用于构建用户界面的 JavaScript 库。
Material UI: 一个流行的 React UI 组件库，用于快速开发高质量的 React 应用程序。
react-markdown: 一个可以将 Markdown 转换为 React 组件的库。
Docker: 用于容器化应用程序，简化部署和扩展。

3. 项目安装和配置的准备工作及详细步骤

准备工作

在开始安装之前，请确保您的系统中已安装以下工具：

Node.js 和 npm：用于管理和安装项目的依赖。
Git：用于克隆项目代码。
Docker（可选）：如果需要使用 Docker 容器来运行应用程序。

安装步骤

克隆项目仓库

打开终端（或命令提示符），运行以下命令来克隆项目仓库：
```
git clone https://github.com/noworneverev/react-vscode-portfolio.git
```
安装依赖

进入项目目录：
```
cd react-vscode-portfolio
```
然后安装 npm 依赖：
```
npm install
```
配置环境变量

在 .env.development 文件中，设置您的名字：
```
REACT_APP_NAME=你的名字
```
如果您打算部署项目，还需要在 .env.production 文件中设置 Google Analytics 的测量 ID：
```
REACT_APP_MEASUREMENT_ID=你的测量ID
```
添加您的页面

在 public/pages 目录中添加您的 Markdown 页面文件。然后在 src/app/pages/page.ts 文件中添加相应的路由配置。
添加您的社交媒体链接

在 src/app/pages/link.tsx 文件中添加您的社交媒体链接，这些链接将显示在侧边栏和主页上。
运行开发服务器

运行以下命令来启动开发服务器：
```
npm start
```
您应该能在浏览器中看到运行中的应用程序。
构建项目

当您完成开发和配置后，运行以下命令来构建项目：
```
npm run build
```
构建完成后，将 build 目录的内容部署到您的网站托管服务上。
使用 Docker（可选）

如果您想使用 Docker 来运行应用程序，首先确保 Docker 已经安装在您的系统上。然后在项目目录中运行以下命令：
```
docker-compose up
```