# nuxt4-template

**Repository Path**: start-programmer/nuxt4-template

## Basic Information

- **Project Name**: nuxt4-template
- **Description**: nuxt4 快速开发模版
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-09
- **Last Updated**: 2026-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nuxt 4 模板（Pinia + UnoCSS）

这是一个可直接用于业务开发的 Nuxt 4 模板，集成了 Pinia、UnoCSS、Nuxt Image、Nuxt Icon 和 Sitemap。

## 技术栈

- Nuxt 4
- Vue 3
- Pinia
- UnoCSS
- @nuxt/image
- @nuxt/icon
- @nuxtjs/sitemap

## 目录结构

```text
app/
  app.vue                # 应用入口页面
  stores/                # Pinia 状态管理
  styles/
    reset.css            # 基础 reset
    responsive.css       # 全局响应式设计令牌
nuxt.config.ts           # Nuxt 全局配置
uno.config.ts            # UnoCSS 配置
```

## 环境变量

项目已集成以下环境变量：

- `NUXT_SITE_URL`：站点地址（用于 site/sitemap 等）
- `NUXT_PUBLIC_SITE_NAME`：前端可访问的站点名称
- `NUXT_PUBLIC_API_BASE`：前端可访问的 API 基础地址

对应文件：

- `.env`：默认环境
- `.env.development`：开发环境
- `.env.production`：生产环境

Nuxt 配置中已接入：

- `site.url <- NUXT_SITE_URL`
- `runtimeConfig.siteUrl <- NUXT_SITE_URL`
- `runtimeConfig.public.siteName <- NUXT_PUBLIC_SITE_NAME`
- `runtimeConfig.public.apiBase <- NUXT_PUBLIC_API_BASE`

## 开发命令

安装依赖：

```bash
npm install
```

启动开发环境（当前配置端口为 `8080`）：

```bash
npm run dev
```

构建生产包：

```bash
npm run build
```

预览生产构建：

```bash
npm run preview
```

静态生成：

```bash
npm run generate
```

## 代码风格约定

- 使用 `script setup` + Composition API
- TypeScript 风格为 2 空格缩进、无分号、单引号
- 状态管理使用 Pinia setup store 写法
- 样式优先 UnoCSS 原子类，跨页面一致规则放到全局 CSS

## 参考

- Nuxt 文档：https://nuxt.com/docs/getting-started/introduction
- 部署文档：https://nuxt.com/docs/getting-started/deployment