开源项目使用教程：个人作品集网站

开源项目使用教程：个人作品集网站

portfolio My personal portfolio website built using React and three js 项目地址: https://gitcode.com/gh_mirrors/port/portfolio

1. 项目目录结构及介绍

该项目是一个使用React和Three.js构建的个人作品集网站。以下是项目的目录结构及其简要介绍：

portfolio/
├── .storybook/          # Storybook 配置文件夹
├── app/                 # 应用程序的主要代码文件夹
├── functions/           # 服务器端函数（例如，联系表单处理）
├── public/              # 公共文件，如图片、字体等
├── scripts/             # 脚本文件，如启动脚本
├── .dev.vars.example     # 开发环境变量示例文件
├── .eslintrc.cjs         # ESLint 配置文件
├── .gitignore            # Git 忽略文件
├── .node-version         # 指定项目使用的 Node.js 版本
├── .npmrc                # npm 配置文件
├── .prettierrc           # Prettier 配置文件
├── LICENSE              # 项目许可证文件
├── README.md            # 项目说明文件
├── jsconfig.json         # JavaScript 配置文件
├── package-lock.json     # npm 依赖锁定文件
├── package.json          # 项目依赖和配置文件
├── postcss.config.cjs    # PostCSS 配置文件
├── vite.config.js        # Vite 配置文件
└── wrangler.toml         # Workers Runtime 配置文件

2. 项目的启动文件介绍

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

• npm run dev: 启动本地开发服务器。
• npm run dev:storybook: 启动组件的Storybook。

在开发模式下，你可以通过访问http://localhost:3000来查看网站。

3. 项目的配置文件介绍

以下是项目中的几个主要配置文件及其用途：

• .eslintrc.cjs: ESLint 配置文件，用于定义代码风格和规则。
• .prettierrc: Prettier 配置文件，用于代码格式化。
• .dev.vars.example: 开发环境变量示例文件，用于存放敏感信息，如API密钥等。你需要根据实际情况创建一个.dev(vars)文件，并将.dev.vars.example中的内容复制到其中，然后按照说明填写你的配置信息。
• postcss.config.cjs: PostCSS 配置文件，用于处理CSS。
• vite.config.js: Vite 配置文件，用于配置Vite开发服务器和生产构建。

确保在开始之前正确配置这些文件，以确保项目能够顺利运行。

portfolio My personal portfolio website built using React and three js 项目地址: https://gitcode.com/gh_mirrors/port/portfolio