开源项目使用教程：个人主页项目

开源项目使用教程：个人主页项目

home- 个人主页，我的个人主页，个人主页源码，主页模板，homepage 项目地址: https://gitcode.com/gh_mirrors/home55/home-

1、项目介绍

本项目是一个开源的个人主页项目，基于Vue、Vite、Pinia等前端技术栈构建。项目包含了载入动画、站点简介、一言、日期及时间、实时天气、时光进度条、音乐播放器等丰富功能，并支持移动端适配。本项目适用于想要快速搭建个人主页的用户，可以通过简单的配置和部署来展示个人信息和作品。

2、项目快速启动

环境准备

• 安装Node.js环境（建议版本：node > 16.16.0，npm > 8.15.0）
• 安装Docker（如使用Docker部署）

克隆项目

首先，克隆项目到本地：

git clone https://github.com/imsyy/home.git

安装依赖

进入项目根目录，安装项目依赖：

cd home
pnpm install

预览项目

启动开发服务器预览项目：

pnpm dev

构建项目

项目开发完成后，执行以下命令构建项目：

pnpm build

构建完成后，静态资源会在dist目录中生成。

部署项目

Docker部署

构建镜像：

docker build -t home .

运行容器：

docker run -p 12445:12445 -d home

Vercel部署

1. Fork本仓库到你的GitHub账号。
2. 复制.env.example文件并重命名为.env（重要）。
3. 按需修改.env文件中的配置。
4. 点击“Deploy”，即可成功部署。

3、应用案例和最佳实践

• 自定义网站链接：在src/assets/siteLinks.json中可以自定义网站链接，指向自己的网站。
• 自定义社交链接：在src/assets/socialLinks.json中可以自定义社交链接。
• 实时天气：需要高德开放平台相关API，获取Key后填入.env文件中的VITE_WEATHER_KEY。
• 音乐播放器：本项目采用了基于MetingJS的Aplayer音乐播放器，可以通过.env文件中相关参数自定义歌单。

4、典型生态项目

• IconPark：图标库，用于项目中图标的选择和使用。
• xicons：提供丰富图标资源的库，用于项目中的图标展示。
• Aplayer：音乐播放器，用于项目中音乐播放功能的实现。
• 高德开放平台：提供天气API，用于项目中实时天气功能的实现。

home- 个人主页，我的个人主页，个人主页源码，主页模板，homepage 项目地址: https://gitcode.com/gh_mirrors/home55/home-