使用 Vue 3 构建你的 GitHub 个人主页
在这篇文章中，我将带你一步步从零开始使用 Vue 3 构建一个简单而美观的 GitHub 个人主页。如果你是初学者，不用担心，我会详细讲解每一步的操作，让你能够轻松上手。
环境准备
在开始之前，请确保你的开发环境已经准备好：
- Node.js 和 npm：Vue CLI 依赖于 Node.js，你可以通过在命令行中输入
node -v和npm -v检查是否已经安装。 Node.js可进入以下官方链接下载：
https://nodejs.org/zh-cn
Node.js自带npm。
- Vue CLI：通过以下命令全局安装 Vue CLI：
npminstall-g @vue/cli
创建 Vue 3 项目
现在我们开始创建一个新的 Vue 3 项目：
1.创建项目：
打开终端，进入你希望存放项目的目录，或进入目录路径下cmd，运行以下命令：
vue create my-github-page
运行后出现以上信息，可以上下选择Vue3或2的项目模板，Enter确认。
2.进入项目目录并启动开发服务器：
cd my-github-page
npm run serve
启动成功后，打开浏览器并访问 http://localhost:8080/，你会看到 Vue 默认的欢迎页面。
项目结构介绍
生成的 Vue 项目有以下基本结构：
my-github-page/
│
├── public/ # 静态资源文件夹，存放公共资源
│ ├── index.html # 入口HTML文件
│
├── src/ # 主代码目录
│ ├── assets/ # 静态资源文件夹，存放图片、样式等
│ ├── components/ # Vue 组件文件夹
│ ├── views/ # 页面文件夹（可选）
│ ├── App.vue # 主应用组件
│ ├── main.js # 入口JavaScript文件
│
├── package.json # 项目依赖和脚本
└── README.md # 项目文档
以下需要修改的开发文件请在这个结构里找。
开发个人主页
1.修改 App.vue
首先，我们用Vscode或notepad++等软件打开App.vue文件，在其中添加导航栏、个人简介部分和项目展示部分。
<template><divid="app"><header><h1>My GitHub Page</h1><Navbar/></header><main><sectionid="about"><h2>About Me</h2><p>Hi, I'm [Your Name]. I am a software developer with a passion for open source and building awesome projects.</p></section><sectionid="projects"><h2>Projects</h2><ul><liv-for="project in projects":key="project.id"><a:href="project.url">{{ project.name }}</a> - {{ project.description }}
</li></ul></section><sectionid="contact"><h2>Contact</h2><p>You can reach me at <ahref="mailto:[email protected]">[email protected]</a>.</p></section></main><footer><p>© 2024 My GitHub Page</p></footer></div></template><scriptsetup>import{ reactive }from'vue';import Navbar from'./components/Navbar.vue';const projects =reactive([{id:1,name:"Project One",description:"This is a project description",url:"https://github.com/yourusername/project-one"},{id:2,name:"Project Two",description:"This is another project description",url:"https://github.com/yourusername/project-two"}]);</script><style>body{font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}header{background-color: #333;color: #fff;padding: 10px 0;text-align: center;}header h1{margin: 0;}nav ul{list-style-type: none;padding: 0;}nav ul li{display: inline;margin: 0 10px;}nav ul li a{color: #fff;text-decoration: none;}main{padding: 20px;}section{margin-bottom: 40px;}footer{background-color: #333;color: #fff;text-align: center;padding: 10px 0;}</style>
2. 创建并使用组件
为了更好地组织代码，我们可以将导航栏部分拆分成一个独立的组件。
1.创建 Navbar.vue 组件：
在 src/components/ 目录下创建一个名为 Navbar.vue 的文件：
<template><nav><ul><li><ahref="#about">About Me</a></li><li><ahref="#projects">Projects</a></li><li><ahref="#contact">Contact</a></li></ul></nav></template><stylescoped>nav{background-color: #333;color: #fff;padding: 10px 0;text-align: center;}nav ul{list-style-type: none;padding: 0;}nav ul li{display: inline;margin: 0 10px;}nav ul li a{color: #fff;text-decoration: none;}</style>
- 在 App.vue 中使用 Navbar 组件：
在 App.vue 中，我们已经通过 import Navbar from ‘./components/Navbar.vue’; 引入了 Navbar.vue 组件，并在
<template>
部分使用了
<Navbar />
标签来渲染它。
3. 添加项目数据
使用 Vue 3 的 reactive API，我们已经在 App.vue 中定义了项目数据：
const projects = reactive([
{ id: 1, name: "Project One", description: "This is a project description", url: "https://github.com/yourusername/project-one" },
{ id: 2, name: "Project Two", description: "This is another project description", url: "https://github.com/yourusername/project-two" }
]);
4. 样式美化
你可以继续使用 CSS 或者引入 CSS 框架来美化你的页面，使之更符合个人风格。
完成以上步骤后，再打开http://localhost:8080/，你就能看到有初步框架的页面了。
部署到 GitHub Pages
当你完成开发并准备上线时，可以将项目部署到 GitHub Pages：
构建项目：
npm run build
将构建好的文件上传到 GitHub：
我们可以使用 gh-pages 工具将 dist 文件夹中的内容上传到 GitHub 仓库的 gh-pages 分支：
安装 gh-pages:
npm install gh-pages --save-dev
在 package.json 中添加一个 deploy 脚本：
"scripts":{"deploy":"npm run build && gh-pages -d dist"}
运行部署命令：
npm run deploy
这会将你的项目部署到 GitHub Pages，几分钟后你就能在浏览器中访问到你的个人主页了。
总结
通过这篇文章的指导，你应该已经学会了如何从零开始使用 Vue 3 创建一个个人主页并且将其部署到GitHub上。你可以根据自己的需要进一步扩展和美化你的主页。如果在过程中遇到问题，欢迎留言讨论！
转载请注明出处。
版权归原作者 spiker_ 所有， 如有侵权，请联系我们删除。