构建一个展示个人技能、项目和经验的投资组合网站，是每位开发者都应该考虑的事情。本文将引导您使用React和Vite快速搭建一个简洁的投资组合网站。
准备工作：
-
安装Node.js: 确保您的系统已安装Node.js。您可以从Node.js官网下载安装包。
-
创建React项目: 使用Vite创建一个新的React项目：
npm create vite@latest portfolio -- --template react
然后进入项目目录：
cd portfolio
- 安装依赖:
npm install
项目结构:
为了保持代码清晰，建议您按照以下结构组织项目文件：
portfolio/ ├── public/ ├── src/ │ ├── components/ │ │ ├── Navbar.jsx │ │ ├── Hero.jsx │ │ ├── About.jsx │ │ └── Footer.jsx │ └── App.jsx ├── index.html └── package.json
组件创建:
接下来，我们将创建几个核心组件：
- Navbar.jsx: 导航栏组件
import React from 'react';
const Navbar = () => {
return (
<nav>
<h1>My Portfolio</h1>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
);
};
export default Navbar;
- Hero.jsx: 英雄展示区组件 (您可以根据需要添加内容)
import React from 'react';
const Hero = () => {
return (
<section id="hero">
<h2>Welcome to My Portfolio</h2>
<p>A brief introduction about yourself and your skills.</p>
</section>
);
};
export default Hero;
- About.jsx: 关于我组件
import React from 'react';
const About = () => {
return (
<section id="about">
<h2>About Me</h2>
<p>I am a React developer with experience in building web applications.</p>
</section>
);
};
export default About;
- Footer.jsx: 页脚组件
import React from 'react';
const Footer = () => {
return (
<footer>
<p>© 2025 My Portfolio. All rights reserved.</p>
</footer>
);
};
export default Footer;
集成组件:
在 App.jsx 中引入并使用这些组件：
import React from 'react';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import About from './components/About';
import Footer from './components/Footer';
const App = () => {
return (
<div>
<Navbar />
<Hero />
<About />
<Footer />
</div>
);
};
export default App;
运行项目:
启动开发服务器：
npm run dev
您的投资组合网站将会在 http://localhost:5173 运行。 您可以根据需要添加更多页面和功能，例如项目展示、联系表单等，来完善您的投资组合网站。
