中华外科杂志

CN 11-2139/R pISSN 0529-5815 eISSN -
主编: 赵玉沛
<div align="center">
  <h1>Nuxt</h1>
  <p>基于 Nuxt3 + Vue3 + TypeScript + TailwindCSS 系统</p>
</div>

[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
[![Nuxt](https://img.shields.io/badge/Nuxt-3.17.7-00DC82?logo=nuxt.js)](https://nuxt.com/)
[![Vue](https://img.shields.io/badge/Vue-3.5.13-4FC08D?logo=vue.js)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-3178C6?logo=typescript)](https://www.typescriptlang.org/)
[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-4.1.6-38B2AC?logo=tailwind-css)](https://tailwindcss.com/)

## ✨ 主要特性

### 🎨 现代化设计

- **响应式布局**：完美适配桌面端和移动端
- **UI组件库**：基于 NuxtUI 和 TailwindCSS 的现代化组件

### 🚀 技术特性

- **性能优化**：图片懒加载、代码分割、缓存策略
- **开发体验**：热重载、TypeScript 支持、ESLint 规范

## 🛠️ 技术栈

### 核心框架

- **[Nuxt3](https://nuxt.com/)** - Vue.js 全栈框架
- **[Vue3](https://vuejs.org/)** - 渐进式 JavaScript 框架
- **[TypeScript](https://www.typescriptlang.org/)** - 类型安全的 JavaScript

### 样式与UI

- **[TailwindCSS](https://tailwindcss.com/)** - 实用优先的 CSS 框架
- **[NuxtUI](https://ui.nuxt.com/components/app)** - NuxtUi 组件库
- **[Less](https://lesscss.org/)** - CSS 预处理器

### 状态管理

- **[Pinia](https://pinia.vuejs.org/)** - Vue 状态管理库

### 开发工具

- **[ESLint](https://eslint.org/)** - 代码质量检查
- **[Prettier](https://prettier.io/)** - 代码格式化

## 📁 项目结构

```
blog-home-nuxt/
├── api/                    # API 接口定义
├── app.vue                 # 应用入口
├── assets/                 # 静态资源
│   ├── css/               # 样式文件
│   ├── font/              # 字体文件
│   ├── icons/             # 图标资源
│   └── images/            # 图片资源
├── components/            # 组件库
│   ├── base/             # 基础组件
│   └── xia/              # 自定义组件
├── composables/           # 组合式函数
├── config/               # 配置文件
├── layouts/              # 布局组件
├── middleware/           # 中间件
├── modules/              # Nuxt 模块
├── pages/                # 页面文件
│   ├── about/           # 关于页面
├── plugins/              # 插件
├── public/               # 公共资源
├── stores/               # 状态管理
├── styles/               # 全局样式
├── types/                # TypeScript 类型定义
└── utils/                # 工具函数
```

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0

### 安装依赖

```bash
# 使用 yarn（推荐）
yarn install

# 或使用 npm
npm install
```

### 开发环境

```bash
# 启动开发服务器
yarn dev

# 或指定 IP 访问（局域网）
yarn dev:ip
```

访问 [http://localhost:5050] 查看效果

### 生产构建

```bash
# 构建生产版本
yarn build

# 预览生产版本
yarn preview

```

### 代码规范

```bash
# 代码检查
yarn lint

# 自动修复
yarn lint:fix

# 代码格式化
yarn prettier
```

## 📦 部署

### Docker 部署

```bash
# 构建 Docker 镜像
docker .

# 运行容器
docker 命令启动容器  yarn start
```

## 🌐 在线预览

- **官方网站**: [https://nuxt-test.devx.fzyun.io/]

## 📚 相关文档

- [Nuxt3 官方文档](https://nuxt.com/docs)
- [Vue3 官方文档](https://vuejs.org/guide/)
- [TailwindCSS 文档](https://tailwindcss.com/docs)
- [NuxtUI 文档](https://ui.nuxt.com/components/)
中华外科杂志

最新发表
