leleo-home-page 个人主页搭建教程#

前言#

大家好，我是WON。今天给大家带来一篇关于如何搭建个人主页的详细教程，使用的是开源项目 leleo-home-page。这是一个简洁美观且响应式的个人主页模板，非常适合开发者、设计师或内容创作者展示个人品牌。

项目预览与源码项目地址项目预览

项目特点

现代UI设计：简洁卡片式布局，优雅动画效果
响应式布局：完美适配手机、平板和桌面设备

功能模块化：

个人信息展示
社交媒体链接
博客文章展示
项目作品集
音乐播放器
页脚信息
高度可定制：通过简单配置文件修改所有内容
轻量高效：基于Vue3 + Vite构建

技术栈#

Vue 3 - 前端框架
Vite - 构建工具
Element Plus - UI组件库
Sass - CSS预处理器
Axios - HTTP客户端
IconFont - 阿里矢量图标库

环境准备#

在开始前，请确保你的系统已安装：

Node.js (建议16.x以上版本)
npm (Node.js自带) 或 yarn
Git (可选，用于版本控制)

搭建步骤#

1. 获取项目源码#

1
# 克隆仓库
2
git clone https://github.com/leleo886/leleo-home-page.git
3

4
# 进入项目目录
5
cd leleo-home-page

或直接下载ZIP压缩包解压使用

2. 安装依赖#

1
npm install
2
# 或
3
yarn install

3. 配置个性化信息#

打开 src/config.js 文件，修改为你的个人信息：

1
const config = {
2
  //网页元数据
3
  metaData: {
4
    title: 'Leleo的个人主页🎉',
5
    description: '欢迎来到Leleo的奇妙世界！',
6
    keywords: 'Leleo,leleo,个人主页,个人网站',
7
    icon: '/favicon.ico'   //网页图标，支持外链
8
  },
9

10
  avatar: "/img/avatar.jpg", // 头像
11
  welcometitle: "Hi, I'm Leleo", // 标题
12

13
  // 颜色配置
14
  color: {
15
    themecolor: "#FFFFFF", // 主题颜色，推荐趋于亮白可带有轻微色调，例： #D1FFEC
16
    welcometitlecolor: "#FFFFFF", // 标题颜色 例： #7BFFC9
17
  },
18

19
  brightness: 85, // 背景亮度 --%
20
  blur: 5, // 毛玻璃模糊效果
21

22
  // 我的标签
23
  tags: ['乐观开朗', '温柔体贴', '随和亲切', '冷静沉着', '才思敏捷', '风趣幽默', '刚正不阿', '善解人意'],
24

25
  // 默认背景壁纸
26
  background: {
27
    "pc": {   //pc端
28
      "type": "pic",   //"pic":静态壁纸;"video":动态壁纸
29
      "datainfo": {
30
        "title": "海洋女孩",
31
        "preview": "/img/wallpaper/static/海洋女孩/image-pre.webp",
32
        "url": "/img/wallpaper/static/海洋女孩/image.png",     //当然，也可填写网络地址或壁纸api，如随机PC壁纸api："url":"https://t.mwm.moe/pc"
33
      },
34
    },
35
    "mobile": {   //移动端
36
      "type": "pic",
37
      "datainfo": {
38
        "title": "0001",
39
        "preview": "/img/wallpaper/static-mobile/0001/image-pre.webp",
40
        "url": "/img/wallpaper/static-mobile/0001/image.png"  //同理，随机移动端壁纸："url":"https://t.mwm.moe/mp"
41
      }
42
    }
43

44
  },
45

46
  //极坐标图数据
47
  polarChart: {
48
    skills: ['Vue.js', 'React', 'JavaScript', 'Node', 'Java', 'Python', 'linux', 'Docker', 'MySQL', 'MongoDB', 'AWS'],
49
    skillPoints: [85, 78, 88, 90, 80, 78, 85, 65, 82, 78, 70],
50
  },
51

52
  //社交按钮
53
  socialPlatformIcons: [
54
    { icon: "mdi-github", link: "https://www.github.com/leleo886" },
55
    { icon: "mdi-email", link: "mailto:leleo886@foxmail.com" },
56
    { icon: "mdi-qqchat", link: "https://im.qq.com/" },
57
    { icon: "mdi-wechat", link: "https://wx.qq.com/" },
58
    { icon: "mdi-youtube", link: "https://www.youtube.com" },
59
    { icon: "mdi-facebook", link: "https://www.facebook.com" }
60
  ],
61

62
  //打字机
63
  typeWriterStrings: [
64
    "如果你看到了这行字，说明我已经成功吸引到了你的注意力。",
65
    "顶峰的少年，给了你所有细节，你却说我不是迪迦，给不了你想要的光。",
66
    "心简单，世界就简单，幸福才会生长；心自由，生活就自由，到哪都有快乐。",
67
    "生命太短，没有时间留给遗憾，若不是终点，请微笑一直向前。"
68
  ],
69

70
  //音乐播放配置，采用MetingJS Api(https://github.com/metowolf/MetingJS)
71
  musicPlayer: {
72
    server: 'netease',  //服务提供商 --网易云音乐
73
    type: 'playlist',   //歌单类型
74
    id: '2028178887'  //歌单id ---> music.163.com/#/playlist?id=2028178887
75
  },
76

77
  //壁纸数据 -----可以将壁纸文件上传到图床获取网络直链。若想调用api，请前往脚本自行修改逻辑
78
  wallpaper: {
79
    pic: [
80
      { "title": "海洋女孩", "preview": "/img/wallpaper/static/海洋女孩/image-pre.webp", "url": "/img/wallpaper/static/海洋女孩/image.png" },
81
      { "title": "书房夜晚", "preview": "/img/wallpaper/static/书房夜晚/image-pre.webp", "url": "/img/wallpaper/static/书房夜晚/image.png" },
82
      { "title": "安逸舒适", "preview": "/img/wallpaper/static/安逸舒适/image-pre.webp", "url": "/img/wallpaper/static/安逸舒适/image.png" },
83
      { "title": "jswcMaMj", "preview": "https://s21.ax1x.com/2025/07/23/pVGli59.md.jpg", "url": "https://s21.ax1x.com/2025/07/23/pVGli59.jpg" },
84
      { "title": "pgtTqoqq", "preview": "https://s21.ax1x.com/2025/07/23/pVGlmDO.md.jpg", "url": "https://s21.ax1x.com/2025/07/23/pVGlmDO.jpg" },
85
      { "title": "cvKMKhue", "preview": "https://s21.ax1x.com/2025/07/23/pVGlNqS.md.jpg", "url": "https://s21.ax1x.com/2025/07/23/pVGlNqS.jpg" },
86
      { "title": "XpxvQVoP", "preview": "https://s21.ax1x.com/2025/07/23/pVGlfIJ.md.jpg", "url": "https://s21.ax1x.com/2025/07/23/pVGlfIJ.jpg" },
87
      { "title": "fVEEjEOA", "preview": "https://s21.ax1x.com/2025/07/23/pVGlEgx.md.webp", "url": "https://s21.ax1x.com/2025/07/23/pVGlEgx.webp" },
88
      { "title": "jgnIKMpd", "preview": "https://s21.ax1x.com/2025/07/23/pVGldaQ.md.jpg", "url": "https://s21.ax1x.com/2025/07/23/pVGldaQ.jpg" },
89
      { "title": "mgqyySeh", "preview": "https://s21.ax1x.com/2025/07/23/pVGl82t.md.jpg", "url": "https://s21.ax1x.com/2025/07/23/pVGl82t.jpg" },
90
      { "title": "dSXZfZp", "preview": "https://s21.ax1x.com/2025/07/23/pVGlaVg.md.jpg", "url": "https://s21.ax1x.com/2025/07/23/pVGlaVg.jpg" },
91
    ],
92
    picMobile: [
93
      { "title": "0001", "preview": "/img/wallpaper/static-mobile/0001/image-pre.webp", "url": "/img/wallpaper/static-mobile/0001/image.png" },
94
      { "title": "0002", "preview": "/img/wallpaper/static-mobile/0002/image-pre.webp", "url": "/img/wallpaper/static-mobile/0002/image.png" },
95
      { "title": "0003", "preview": "/img/wallpaper/static-mobile/0003/image-pre.webp", "url": "/img/wallpaper/static-mobile/0003/image.png" },
96
      { "title": "0004", "preview": "/img/wallpaper/static-mobile/0004/image-pre.webp", "url": "/img/wallpaper/static-mobile/0004/image.png" },
97
      { "title": "DfNHPPcc", "preview": "https://s21.ax1x.com/2025/07/23/pVG1uQ0.md.jpg", "url": "https://s21.ax1x.com/2025/07/23/pVG1uQ0.jpg" },
98
      { "title": "cZZwzhis", "preview": "https://s21.ax1x.com/2025/07/23/pVG1Vij.md.jpg", "url": "https://s21.ax1x.com/2025/07/23/pVG1Vij.jpg" },
99
      { "title": "aANKZHPX", "preview": "https://s21.ax1x.com/2025/07/23/pVGlIR1.md.jpg", "url": "https://s21.ax1x.com/2025/07/23/pVGlIR1.jpg" },
100
    ],
101
    video: [
102
      {
103
        "title": "尼尔：机械纪元 团队",
104
        "preview": "/img/wallpaper/dynamic/尼尔：机械纪元 团队/Nier-Automata-Team-pre.webm",
105
        "url": "/img/wallpaper/dynamic/尼尔：机械纪元 团队/Nier-Automata-Team.webm"
106
      },
107
      {
108
        "title": "向往航天的女孩",
109
        "preview": "/img/wallpaper/dynamic/向往航天的女孩/Toy-Aeroplane-pre.webm",
110
        "url": "/img/wallpaper/dynamic/向往航天的女孩/Toy-Aeroplane.webm"
111
      },
112
      {
113
        "title": "世界很温柔《龙族》上杉绘梨衣",
114
        "preview": "https://www.leleo.top/img/wallpaper/dynamic/%E4%B8%96%E7%95%8C%E5%BE%88%E6%B8%A9%E6%9F%94%E3%80%8A%E9%BE%99%E6%97%8F%E3%80%8B%E4%B8%8A%E6%9D%89%E7%BB%98%E6%A2%A8%E8%A1%A3/A2EF5E85-pre.webm",
115
        "url": "https://www.leleo.top/img/wallpaper/dynamic/%E4%B8%96%E7%95%8C%E5%BE%88%E6%B8%A9%E6%9F%94%E3%80%8A%E9%BE%99%E6%97%8F%E3%80%8B%E4%B8%8A%E6%9D%89%E7%BB%98%E6%A2%A8%E8%A1%A3/A2EF5E85.webm"
116
      },
117
    ],
118
    videoMobile: [
119
      {
120
        "title": "幻觉镇-gaako_illust",
121
        "preview": "/img/wallpaper/dynamic-mobile/幻觉镇-gaako_illust/Hallucination_town-pre.mp4",
122
        "url": "/img/wallpaper/dynamic-mobile/幻觉镇-gaako_illust/Hallucination_town.mp4"
123
      },
124
      {
125
        "title": "chuva",
126
        "preview": "/img/wallpaper/dynamic-mobile/chuva/chuva-pre.mp4",
127
        "url": "/img/wallpaper/dynamic-mobile/chuva/chuva.mp4"
128
      },
129
      {
130
        "title": "Doodle-小猫女仆降临",
131
        "preview": "/img/wallpaper/dynamic-mobile/Doodle-小猫女仆降临/d12-pre.mp4",
132
        "url": "/img/wallpaper/dynamic-mobile/Doodle-小猫女仆降临/d12.mp4"
133
      },
134
    ],
135
  },
136

137
  //项目卡片 其中 字段"show"控制初始卡片的text是否展开
138
  projectcards: [
139
    { go: "🚀 前往", img: "/img/sunshine.jpg", title: "Project 1", subtitle: "1,000 miles of wonder", text: "If you see this line, I've managed to get your attention.", url: "https://leleo.top", show: false },
140
    { go: "🗂️ 前往", img: "/img/sunshine.jpg", title: "Project 2", subtitle: "2,000 miles of wonder", text: "If you see this line, I've managed to get your attention.", url: "https://leleo.top", show: false },
141
    { go: "📝 前往", img: "/img/sunshine.jpg", title: "Project 3", subtitle: "3,000 miles of wonder", text: "If you see this line, I've managed to get your attention.", url: "https://leleo.top", show: false },
142
    { go: "👍 前往", img: "/img/sunshine.jpg", title: "Project 4", subtitle: "4,000 miles of wonder", text: "If you see this line, I've managed to get your attention.", url: "https://leleo.top", show: false },
143
    { go: "🗃 前往", img: "/img/sunshine.jpg", title: "Project 5", subtitle: "5,000 miles of wonder", text: "If you see this line, I've managed to get your attention.", url: "https://leleo.top", show: false },
144
    { go: "🎨 前往", img: "/img/sunshine.jpg", title: "Project 6", subtitle: "6,000 miles of wonder", text: "If you see this line, I've managed to get your attention.", url: "https://leleo.top", show: false },
145
    { go: "💍 前往", img: "/img/sunshine.jpg", title: "Project 7", subtitle: "7,000 miles of wonder", text: "If you see this line, I've managed to get your attention.", url: "https://leleo.top", show: false },
146
    { go: "🔍 前往", img: "/img/sunshine.jpg", title: "Project 8", subtitle: "8,000 miles of wonder", text: "If you see this line, I've managed to get your attention.", url: "https://leleo.top", show: false },
147
  ],
148

149
  statement: ["备案号：XXICP备123456789号", "Copyright © 2025 Leleo"],
150
}
151

152
export default config

4. 替换图片资源#

将你的头像命名为 avatar.jpg
背景图片可在配置文件中修改
将这文件放入 public\img 目录下

5. 本地运行项目#

1
npm run dev
2
# 或
3
yarn dev

项目将在本地运行，访问 http://localhost:5173 查看效果

6. 构建生产环境代码#

1
npm run build
2
# 或
3
yarn build

构建完成后，静态文件将生成在 dist/ 目录中

部署指南（雨云云应用为例）#

1.创建项目#

登录雨云控制台
在雨云云应用控制台创建项目

2.创建网站#

进入项目
上方导航栏网站选项
新建网站

3.上传文件#

进入网站控制台
进入文件管理上传文件

结语#

至此，你已经成功搭建了自己的个人主页！