• 项目简介
• 功能特性
• 演示地址
• 技术栈
• 安装与运行
  • 本地运行
  • Vercel在线部署
• 配置文件

这是一个简单的个人主页项目,用于展示个人信息、技能、项目等。主页设计简洁、响应式,适合在不同设备上浏览。支持自定义配置。

桌面端预览

移动端预览

功能预览1

功能预览2

• 响应式设计:适配桌面、平板和手机等不同设备
• 个人信息展示:包括头像、个性标签、简介、技能等
• 项目展示:展示项目,包括项目描述、技术栈和链接
• 预览配置:支持主题、背景壁纸预览(包括动、静态/PC、移动端壁纸设置)以及音乐播放配置
• 在线部署配置:支持vercel一键部署及使用vercel环境变量进行在线自定义配置

在线演示

• 前端:Vue
• UI框架:Vuetify
• 构建工具:Vite
• 版本控制:Git
• 部署平台:Vercel

1. 克隆仓库:

git clone https://github.com/leleo886/leleo-home-page.git

2. 进入项目目录:

cd leleo-home-page

3. 安装依赖:

npm install

4. 启动开发服务器:

npm run dev

无需服务器,点击链接一键在线部署到 Vercel(首先需要有github和vercel账号)

Vercel部署步骤1

---登录vercel账号,并选择github关联账号,为项目取个名字,然后点击"Create"按钮开始部署

Vercel部署完成

---部署完成后,点击回到控制面板

Vercel控制面板

注意:Vercel提供的.vercel.app域名在中国大陆地区可能无法访问,所以建议绑定自定义域名。(若没有自己的域名,这里提供简单的免费二级域名服务及本项目如何进行域名绑定的说明)

方法1. 自己动手,有点麻烦

自定义数据文件为项目src目录下面的 config.js,这里有配置说明,然后就是代码的拉取、修改上传。

方法2. vercel 环境变量,直接在线修改

注意:此方法优先级高于方法1,若使用方法1请勿配置vercel环境变量

(1). 首先还是打开vercel中本项目主面板,然后依次点击Settings、Environments、Production Vercel控制面板

(2). 然后下翻点击Add Environment Variable按钮,要求填入Key值为VITE_CONFIG,Value值如环境变量值所示,全部复制粘贴即可(有点多),根据个人情况自定义修改,配置说明同方法1。 Vercel控制面板

注意:

每次修改环境变量后还需重新部署,否则数据无法更新。重新部署如下图,依次点击Project、Build Logs,进入新页面后再找到Redeploy。最后等待重新部署完成即可。

Vercel控制面板 Vercel控制面板