# nuxt-mobile

**Repository Path**: yong-top/nuxt-mobile

## Basic Information

- **Project Name**: nuxt-mobile
- **Description**: 基于 Nuxt ⁴ 生态系统的移动端个人博客 Web 应用，采用 Vue 3 + TypeScript 开发，支持 SSR/ESR、国际化（i18n）、暗黑模式、响应式布局，专为移动设备优化。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://m.myong.top
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-13
- **Last Updated**: 2026-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Mr.yong 个人博客

[![码云 Logo](https://gitee.com/static/images/logo.svg)](https://gitee.com)
[![ license](https://img.shields.io/badge/license-MIT-blue.svg)](https://gitee.com)
[![Node.js](https://img.shields.io/badge/node-%3E%3D22.21.0-green.svg)](https://nodejs.org/)

基于 Nuxt ⁴ 生态系统的移动端个人博客 Web 应用，采用 Vue 3 + TypeScript 开发，支持 SSR/ESR、国际化（i18n）、暗黑模式、响应式布局，专为移动设备优化。

### ✨ 特性

- 🚀 **Nuxt 4** - 基于最新的 Nuxt 4 框架，支持 SSR/ESR、文件路由、组件自动导入
- 📱 **移动端优先** - 集成 Vant 4 移动端 UI 组件库，针对移动设备优化
- 🎨 **UnoCSS** - 原子化 CSS 引擎，按需生成样式，体积更小
- 🌙 **暗黑模式** - 支持跟随系统或手动切换明暗主题
- 🌍 **国际化** - 支持简体中文、English 两种语言
- 💾 **状态持久化** - Pinia 状态管理，支持 localStorage 持久化
- 📝 **Markdown** - 文章支持 Markdown 渲染和代码高亮
- 🔧 **TypeScript** - 完整的类型定义，开发体验更佳
- 🐳 **Docker** - 支持 Docker 部署，开箱即用

### 🛠 技术栈

| 分类     | 技术                                |
| -------- | ----------------------------------- |
| 框架     | Nuxt 4 + Vue 3.5 + TypeScript       |
| UI       | Vant 4 (移动端组件库)               |
| 样式     | UnoCSS + PostCSS (移动端适配)       |
| 状态     | Pinia + pinia-plugin-persistedstate |
| 国际化   | @nuxtjs/i18n                        |
| 主题     | @nuxtjs/color-mode                  |
| Markdown | marked + highlight.js               |
| 部署     | Netlify / Docker                    |

### 📁 项目结构

```
├── app/
│   ├── api/              # API 接口封装
│   ├── components/       # Vue 组件
│   │   ├── AppHeader.vue # 头部导航
│   │   ├── AppFooter.vue # 底部标签栏
│   │   ├── ArticleItem.vue    # 文章条目
│   │   ├── ArticleComment.vue # 文章评论
│   │   └── ArticleScrollPage.vue # 滚动加载
│   ├── composables/      # 组合式函数
│   ├── pages/           # 页面
│   │   ├── index.vue     # 首页
│   │   ├── article/      # 文章列表/详情
│   │   ├── tag/          # 标签页面
│   │   ├── msgwall/      # 留言墙
│   │   ├── link/         # 友情链接
│   │   └── profile/      # 个人资料
│   ├── plugins/          # 插件
│   ├── stores/           # Pinia 状态
│   └── styles/           # 全局样式
├── i18n/
│   └── locales/          # 语言包 (zh-CN, en-US)
└── public/               # 静态资源
```

### 🚀 快速开始

#### 环境要求

- Node.js >= 22.21.0
- pnpm >= 10.30.2

#### 安装依赖

```bash
pnpm install
```

#### 开发模式

```bash
pnpm dev
```

访问 http://localhost:3000

#### 构建生产版本

```bash
pnpm build
```

构建产物位于 `.output` 目录。

### 🐳 Docker 部署

```bash
# 构建镜像
docker build -t nuxt-mobile .

# 运行容器
docker run -p 3000:3000 nuxt-mobile
```

### 清理 lockfile 和缓存

#### 1. 结束所有 Node 进程

```bash
taskkill /F /IM node.exe
```

#### 2. 删除 lockfile 和依赖

```bash
del pnpm-lock.yaml
rd /s /q node_modules
```

#### 3. 清理 pnpm 缓存

```bash
pnpm store prune
```

#### 尝试自动修复

```bash
pnpm lint:fix
```

### ☁️ Netlify 部署

支持 Git 平台一键部署到 Netlify，零配置即可上线。

### 📝 页面预览

| 页面   | 说明                         |
| ------ | ---------------------------- |
| 首页   | 博客文章列表展示             |
| 文章   | 文章详情，支持 Markdown 渲染 |
| 标签   | 按标签分类浏览文章           |
| 留言墙 | 用户留言互动                 |
| 链接   | 友情链接展示                 |
| 关于   | 作者个人简介                 |

### 🔧 配置说明

项目配置文件位于 `app/config/` 和 `app/constants/`，可自定义：

- 网站名称、描述、关键词
- 页面路由白名单
- 底部标签栏显示

环境变量配置：

```bash
NUXT_PUBLIC_API_BASE=your_api_base_url
NUXT_API_SECRET=your_api_secret
```

### 📄 开源协议

本项目基于 [MIT](LICENSE) 开源协议。

### 🙏 致谢

- [Nuxt](https://nuxt.com/) - Vue 元框架
- [Vant](https://vant-contrib.gitee.io/vant/) - 轻量级移动端组件库
- [UnoCSS](https://unocss.dev/) - 原子化 CSS 引擎
- [Pinia](https://pinia.vuejs.org/) - Vue 状态管理

---