Skip to content
Fumomo-Nuxt 文档

快速开始

Fumomo-Nuxt 是一个基于 Nuxt 4 + Vue 3 + Tailwind CSS 构建的现代化个人主页项目。本指南将帮助你快速启动和运行项目。

前置条件

Section titled “前置条件”

在开始之前，请确保你的开发环境已安装以下工具：

  • Node.js 18.0 或更高版本
  • pnpm 包管理器（推荐）或 npm/yarn
  • Git 版本控制工具

安装步骤

Section titled “安装步骤”

1. 克隆项目

Section titled “1. 克隆项目”
Terminal window
git clone https://github.com/Hakutyan-bai/fumomo-nuxt.git
cd fumomo-nuxt

2. 安装依赖

Section titled “2. 安装依赖”

使用 pnpm 安装项目依赖：

Terminal window
pnpm install

如果你使用的是 npm 或 yarn：

Terminal window
# 使用 npm
npm install


# 或使用 yarn
yarn install

3. 启动开发服务器

Section titled “3. 启动开发服务器”
Terminal window
pnpm dev

开发服务器启动后，在浏览器中访问 http://localhost:3000 即可预览网站。

构建生产版本

Section titled “构建生产版本”

当你准备好部署网站时，运行以下命令构建生产版本：

Terminal window
pnpm build

构建完成后，你可以使用以下命令预览构建结果：

Terminal window
pnpm preview

项目结构

Section titled “项目结构”
fumomo-nuxt/
├── app/
│   ├── assets/
│   │   └── styles/          # 全局样式
│   ├── components/          # Vue 组件
│   │   └── icons/           # 技能专长图标
│   ├── config/
│   │   └── index.ts         # 网站配置（核心配置文件）
│   ├── composables/         # 组合式函数
│   ├── layouts/
│   │   └── default.vue      # 默认布局
│   └── pages/               # 页面路由
│       ├── index.vue        # 首页
│       ├── about.vue        # 关于页
│       ├── articles.vue     # 文章页
│       ├── projects.vue     # 项目页
│       ├── friends.vue      # 友链页
│       └── website.vue      # 网站页
├── server/
│   └── api/
│       └── rss.get.ts       # RSS API 路由
├── public/                  # 静态资源
├── .env                     # 环境变量配置
├── nuxt.config.ts           # Nuxt 配置
└── package.json

下一步

Section titled “下一步”