Vue3个人网站模板源码：组合式API与数据驱动实践-北京尧图网络

简介这是一份基于VUE3生态的个人网站前端模板源码适合前端初学者、需要快速搭建个人展示页或准备课程大作业的开发者。项目包含首页、个人工具、个人日志、个人相册、给我留言五个核心页面内置自定义导航菜单、轮播图、表单、表格及自定义标签项等常见板块结构清晰、上手简单可直接替换文案或扩展功能。压缩包共2000个文件以1653个js文件为主体涵盖Vue组件、编译脚本与Node工具链187个json文件多为项目配置与依赖声明152个md文件包含项目说明与文档另有7个txt和1个html辅助文件。资源包整体约111.16MB使用VSCode打开后本地运行即可预览效果。目前已有1481人浏览学习适合希望快速获得完整个人网站模板、降低从零搭建成本的开发者。基于该模板不仅能直接部署个人站点还能借此了解Vue3项目的目录组织与常见页面模块写法作为学习参考或二次开发起点都较为合适。1. 用 Vue3 搭个人网站的模板源码先想清楚要沉淀什么个人网站是个奇怪的产品做的时候热情很高上线后两个月就懒得更新再过半年域名续不续费都要犹豫。所以用 Vue3 实现个人网站模板真正的价值不在“把页面画出来”而在把你反复要写的东西沉淀成可复用的结构——作品集、博客文章列表、关于页、留言入口加上一套自己看得顺眼的暗色主题。这个标题里的“模板源码”拆开看是三层Vue3 的组合式 API 组织业务逻辑、基于 Vite 的工程化构建、以及一套不需要后端就能跑起来的数据驱动方案。适合谁适合想快速上线个人作品集网站的前端工程师也适合准备 Vue3 面试题时拿一个完整项目练手的人。如果你已经写过不少业务代码这篇文章更值得关注的是组件边界怎么划、SEO 在 SPA 里能做到什么程度、以及部署到服务器时最容易踩的坑。2. 从零初始化 Vue3 模板先解决工程骨架再谈页面2.1 用 Vite 创建 Vue3 项目避免 webpack 时代的配置负担个人网站这种轻量项目最忌讳一开始就陷入构建配置的泥潭。常见做法是用 Vite 的官方脚手架创建 Vue3 项目它会同时帮你处理 Vue 单文件组件编译、开发服务器热更新、生产构建产物压缩等一系列问题。命令非常简单npm create vuelatest personal-site cd personal-site npm install npm run devnpm create vuelatest实际上执行的是create-vue脚手架它是 Vue 官方维护的初始化工具。personal-site是你的项目目录名可以按喜好改。执行过程中会以交互式提问的方式让你选择是否启用 TypeScript、Vue Router、Pinia、ESLint 等特性对于个人网站模板我通常建议只选 Vue Router 和 ESLint状态管理用不上就跳过减少模板源码里无关文件的干扰。npm install安装依赖后npm run dev会启动开发服务器默认端口是 5173浏览器打开就能看到初始页面。这里要解释一个常被新手忽略的点create-vue生成的目录里src是源码主目录src/components存放可复用组件src/views存放页面级组件src/router存放路由配置。个人网站的页面层级不深保持“views 放整页、components 放局部块”的划分就够了。不要一开始就套用大型后台管理系统的分层方式那会让模板源码读起来很重也不利于别人二次修改。2.2 模板源码的目录组织把“会变的东西”和“不变的东西”分开个人网站模板源码能否被别人顺畅地改成自己的内容取决于你目录结构的清晰程度。我一般的组织方式是src/ assets/ # 静态资源如全局样式、图片 components/ # 通用组件如导航栏、页脚、文章卡片 views/ # 页面级组件如首页、关于页、博客列表页 router/ # 路由配置 data/ # 个人信息的集中配置如昵称、简介、作品数据 styles/ # 全局样式变量data目录是我认为模板源码里最关键的抽象。把个人资料、作品列表、社交链接等以 JavaScript 对象或 JSON 文件的形式集中存放页面组件只负责读取渲染不负责维护数据。这样其他人拿到模板后不需要理解组件逻辑改数据文件就能完成 80% 的个性化。组件划分遵循一个简单的经验法则一个组件如果只在某一个页面里出现就在该页面的子目录里创建如果多个页面都要用才提升到components根目录。导航栏、页脚、文章卡片这类跨页面的组件放在components下而首页特有的英雄区、作品时间线直接放在views/Home目录下避免组件目录膨胀到无法维护。2.3 全局样式变量与响应式页面的基础设置响应式页面设计模板的功底在样式变量和断点上。Vue3 单文件组件里的style标签默认是局部的但全局变量需要单独处理。我在src/styles/variables.css里定义颜色、间距、圆角的 CSS 变量:root { --color-bg: #f7f7f7; --color-text: #2c2c2c; --color-primary: #3b82f6; --space-base: 8px; --radius-base: 8px; --max-width: 1080px; }然后在src/main.js里引入import { createApp } from vue import App from ./App.vue import router from ./router import ./styles/variables.css createApp(App).use(router).mount(#app)CSS 变量的好处是主题切换时只需覆盖变量的值不需要改动具体组件里的颜色值——这个能力在第 4 章做暗色模式时非常有用。响应式布局方面我用的断点体系是 640px手机、768px平板、1080px桌面通过 CSSmin-width媒体查询判断。这些断点值没有绝对标准但建议在模板里统一为常量而不是每个组件里各写各的数字。3. 组件与路由设计个人网站的核心是内容块的高复用3.1 用 Vue3 组合式 API 组织页面逻辑替代选项式 API 的分散写法Vue3 的组合式 API 是这套模板源码的灵魂。个人网站的页面逻辑虽然简单但用setup语法糖写出的代码可读性和维护性远高于选项式 API。下面对比两种写法在同一个“文章卡片组件”上的差异。选项式 API 的常规写法export default { name: PostCard, props: { title: String, date: String, }, data() { return { formattedDate: , } }, created() { this.formattedDate new Date(this.date).toLocaleDateString() }, }组合式 API 的写法script setup import { computed } from vue const props defineProps({ title: String, date: String, }) const formattedDate computed(() new Date(props.date).toLocaleDateString()) /scriptdefineProps是script setup中的编译宏它直接把 props 声明提升到编译层面不需要props选项。computed把日期格式化逻辑定义为响应式计算属性当props.date变化时自动重新计算。模板部分直接引用formattedDate变量写法上更接近原生 JavaScript 的思维方式。对个人网站这类以内容展示为主的项目组合式 API 还有个优势当你把关于页的简介、社交链接、头像等逻辑都集中在script setup里时整段代码从上往下读就是“输入数据派生状态”的线性流程而不是在computed、methods、created三个选项间来回跳转。3.2 以菜单配置驱动路由不给模板使用者留硬编码修改点个人网站的导航菜单一般包含首页、关于、作品、博客这类固定项但每个使用者想要的项目不一样。模板源码如果把这些写死在组件里用户改起来就要动模板代码。更好的方案是用数组驱动渲染。在src/data/menu.js里定义菜单配置export const menuItems [ { id: home, label: 首页, path: / }, { id: about, label: 关于, path: /about }, { id: works, label: 作品, path: /works }, { id: blog, label: 博客, path: /blog }, ]在导航栏组件里用v-for渲染template nav router-link v-foritem in menuItems :keyitem.id :toitem.path classnav-link {{ item.label }} /router-link /nav /template script setup import { menuItems } from ../data/menu /scriptv-for遍历menuItems数组生成对应数量的router-link每个链接的路径由item.path决定。修改导航只需要编辑menu.js这一个文件组件本身不需要碰。路由器中的路由表也应该与菜单配置保持同步但个人网站规模小路由数量不超过十个手动维护完全可以接受。是大动作需要停机维护。常见做法是用 PM2 守护进程npm run build pm2 serve dist/ 8080 --spapm2 serve会把dist目录作为静态资源服务启动--spa参数让所有路径都回退到index.html这样刷新路由时不会 404。这是个人网站最简单的部署方式不需要额外配置代理或重写规则。3.3 引入 Vue Router 并配置懒加载首页秒开Vue Router 4.x 是 Vue3 官方路由库。在src/router/index.js中配置import { createRouter, createWebHistory } from vue-router const router createRouter({ history: createWebHistory(), routes: [ { path: /, name: home, component: () import(../views/Home.vue), }, { path: /about, name: about, component: () import(../views/About.vue), }, { path: /works, name: works, component: () import(../views/Works.vue), }, ], }) export default router关键的写法是动态import()路由组件的加载被延迟到首次访问该路径时才执行JS 包会由构建工具自动拆分成按路由划分的小块。对于首页首屏只需加载 Home 组件及其依赖其他页面的代码在用户点击后才请求首屏资源的加载量可以缩减一半以上。这里有一个很重要的坑要提醒createWebHistory使用的是 HTML5 History 模式路径看起来是正常的/works形式而不是带#号的 Hash 模式。但 History 模式在服务器端需要额外配置当用户直接访问yoursite.com/works时服务器需要把请求重写到index.html否则会返回 404。开发环境下 Vite 会自动处理但部署到 Nginx 时必须在配置里加一行try_files $uri $uri/ /index.html;这个会在第 5 章详细展开。4. 数据驱动与暗色模式把模板源码的扩展性做出来4.1 用 reactive 实现集中的个人资料表单一处编辑全站生效个人网站上到处都是个人信息导航旁的签名、首页的英雄区、关于页的详细介绍。如果这些信息分散在组件里后期维护就是一场灾难。可以在src/data/profile.js中用reactive集中管理import { reactive } from vue export const profile reactive({ name: 你的名字, title: 前端工程师 / 设计师, bio: 专注用户体验热爱将想法实现为可交互的产品。, avatar: /src/assets/avatar.jpg, social: { github: https://github.com/yourname, email: helloexample.com, }, })reactive把对象转换为深层响应式代理任意属性修改都会触发依赖它的组件重新渲染。在组件中引入后模板直接绑定template h1{{ profile.name }}/h1 p{{ profile.title }}/p p{{ profile.bio }}/p /template script setup import { profile } from ../data/profile /script这样做的好处从模板使用者的角度看更明显拿到源码后打开profile.js把名字、简介、社交链接一改全站内容就变成了自己的。这比在十几个组件里逐个搜索替换效率高得多。关于深层的 Vue3 知识补充一句reactive适用于对象类型对原始类型字符串、数字是无效的原始类型要用ref包裹。个人资料是典型的对象用reactive是最贴近语义的选择。4.2 基于 CSS 变量的暗色模式切换不依赖第三方库暗色模式几乎是现在个人作品集网站的标配。通过第 2 章定义的 CSS 变量主题切换可以做成一个非常干净的功能script setup import { ref, watchEffect } from vue const isDark ref(false) function toggleTheme() { isDark.value !isDark.value } watchEffect(() { document.documentElement.dataset.theme isDark.value ? dark : light }) /script配套的 CSS 在variables.css中补充:root { --color-bg: #f7f7f7; --color-text: #2c2c2c; --color-primary: #3b82f6; } :root[data-themedark] { --color-bg: #1a1a1a; --color-text: #e5e5e5; --color-primary: #60a5fa; }watchEffect是 Vue3 新增的响应式副作用函数它会立即执行一次并收集依赖这里的依赖是isDark之后每当isDark变化就自动重新执行把>const savedTheme localStorage.getItem(theme) const isDark ref(savedTheme dark)这个方案完全不依赖第三方库也不涉及 Tailwind 等框架的额外配置对模板源码而言最容易二次开发。4.3 个人网站模板中 SEO 的边界能做的和不能做的SPA 的 SEO 是老生常谈但对个人网站模板来说多数人的流量来自社交分享搜索引擎的反而不是首要渠道。模板源码的定位决定了我不建议引入重型服务端渲染框架。可行的补强方案是使用vueuse/head管理页面标题与 meta 描述npm install vueuse/head在main.js中注册import { createHead } from vueuse/head const head createHead() app.use(head)然后在router/index.js的路由meta中定义信息{ path: /works, name: works, component: () import(../views/Works.vue), meta: { title: 作品集, description: 我的一些精选项目展示 }, }vueuse/head提供useHead组合式函数可按页面动态设置标题和描述useHead({ title: route.meta.title, meta: [ { name: description, content: route.meta.description }, ], })这是 SPA SEO 的最佳折中方案。搜索引擎能不能完美收录页面内容仍然取决于爬虫策略但标题与描述的正确输出能明显改善分享卡片和搜索结果列表的呈现效果。5. 发布模板源码前的打磨部署配置、性能检查与二次开发建议部署是整个模板源码交付的最后一环。前面提过 Nginx 配try_files解决刷新路由 404 的问题完整的服务端配置模板如下server { listen 80; server_name yoursite.com; root /var/www/personal-site/dist; index index.html; location / { try_files $uri $uri/ /index.html; } location ~* \.(js|css|png|jpg|jpeg|gif|svg|woff2)$ { expires 30d; add_header Cache-Control public, immutable; } }try_files $uri $uri/ /index.html的含义是先尝试直接命中存在的文件再尝试命中目录索引都失败时回退到index.html这个回退让 Vue Router 接管路由匹配。静态资源文件设置单独的 location利用expires指令让浏览器缓存 30 天图片和字体这类不轻易变化的资源可以减少重复请求。本地构建命令npm run build会输出到dist目录构建完成后可以用vite preview先做本地预览确认静态资源路径、路由跳转、暗色模式都正常后再上传服务器。给模板源码预留二次开发空间的建议有三点。第一个是保持data目录纯净除了profile.js、menu.js增加works.js存放作品集数据每件作品包含标题、描述、图片地址、链接四个字段页面渲染时自动读取。第二个是预留“内容更新频率”的预期博客列表可以用 Markdown 文件配合vite-plugin-md在构建时生成文章页但如果想省事直接在data/posts.js里写数组也行选哪种取决于你是否愿意引入额外的构建插件。第三个是不要忽略 404 页面用 Vue Router 的catch-all路由捕获无效路径{ path: /:pathMatch(.*)*, name: not-found, component: () import(../views/NotFound.vue), }:pathMatch(.*)*是 Vue Router 4 的匹配通配符写法对应旧版 Vue Router 3 中的*。有了这个兜底路由用户访问不存在的链接时会看到友好的提示页而不是空白屏。个人网站的模板源码做到这一步已经具备了上线、使用和交给别人改写的完整条件。本文还有配套的精品资源点击获取

Vue3个人网站模板源码：组合式API与数据驱动实践

相关推荐

Comsol中计算陈数：从Berry曲率到Wilson loop的完整仿真流程

SpringBoot校园快递驿站系统：可上线的末端履约解决方案

VAE模型加速加载方案：Python3.12+HuggingFace+ComfyUI优化实践

更多资讯

基于土壤湿度控制继电器的 Wio Terminal 实战指南（IoT-For-Beginners 自动化植物浇水项目）

VisionMaster授权更新报错“本地LM通讯出错”排查与解决

Sanity React 性能规则详解:订阅派生布尔状态,降低组件重渲染频率

FPGA加法器实验全解析：从Verilog代码到上板调试

国产低噪声LDO LTP7792实测：从参数到ADC供电设计避坑指南

cvtColor内存泄漏排查：从Mat生命周期到输出缓冲区复用

今日更新

AWS无服务器应用开发指南：从Lambda到SAM的架构与实践

SpringBoot+Vue人事系统实战：解决HR数据断点与事务一致性

MATLAB手写紧束缚模型计算石墨烯能带结构

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？