前端开发 Skill (Nuxt 3)

1. KeepRule 前端开发 Skill (Nuxt 3)

Nuxt 3 + Vue 3 + TypeScript 前端开发 Skill，含组件规范和 SSR 最佳实践

Prompt

---
name: Nuxt 3 前端规范
description: Nuxt 3 SSR 前端规范。⚠️ 强制三铁律：1.数据必须走 API (禁止硬编码) 2.必须手机端响应式 3.路由必须多语言(localePath)。
---

# 前端开发规范 (Nuxt 3)

## ⚠️ 前端开发三大铁律 (绝对强制)

1. **API 接口强制**：所有数据必须从后端 API 获取，**绝对禁止**前端硬编码业务数据。如果后端接口不存在，**必须先开发后端接口**。
2. **响应式布局强制**：所有页面和组件**必须**完美适配手机端。交付前必须并在手机模式下验证。
3. **多语言路由强制**：
   - URL 必须带语言前缀 (e.g. `/zh/home`)
   - 路由跳转必须使用 `localePath()`
   - 语言切换必须使用 `switchLocalePath()`

## 目录结构

## 目录结构

keeprule/frontend-nuxt/ ├── app.vue # 根组件 ├── nuxt.config.ts # Nuxt 配置（SSR 启用） ├── package.json │ ├── assets/styles/ # 样式文件 ├── components/ # Vue 组件（自动导入） │ ├── chat/ # 聊天组件 │ ├── common/ # 通用组件 │ ├── layout/ # 布局组件 │ ├── masters/ # 大师组件 │ └── principles/ # 原则组件 │ ├── composables/ # 组合式函数（自动导入） │ ├── useChat.ts │ ├── useMarkdown.ts │ ├── useMaster.ts │ └── useTheme.ts │ ├── i18n/locales/ # 语言文件 (zh/en/es/fr/ar.json) ├── layouts/default.vue # 默认布局 ├── pages/ # 页面（文件路由） ├── plugins/ # Nuxt 插件 ├── public/ # 静态资源 ├── server/middleware/ # 服务端中间件 ├── stores/ # Pinia 状态管理 ├── types/ # TypeScript 类型 └── utils/ # 工具函数

## Nuxt 特性使用

- `composables/` 存放组合式函数，自动导入
- `pages/` 基于文件的自动路由
- `components/` 组件自动导入

## 启动命令

```bash
cd frontend-nuxt
npm install
npm run dev
# 访问 http://localhost:6001

前端构建

npm run build    # 构建 SSR 版本，输出到 .output/
npm run preview  # 本地预览构建结果

多语言路由

详见 多语言系统

生成带语言前缀的路径

// ✅ 正确：使用 localePath 生成路径
const localePath = useLocalePath()
const path = localePath('/principles/xxx')

// ❌ 错误：硬编码路径
const path = '/principles/xxx'

路由导航

// ✅ 正确
const localePath = useLocalePath()
router.push(localePath('/'))
navigateTo(localePath('/principles/xxx'))

// ✅ NuxtLink 使用
<NuxtLink :to="localePath('/')">首页</NuxtLink>

// ❌ 错误
router.push('/')

语言切换

// ✅ 正确
const switchLocalePath = useSwitchLocalePath()
navigateTo(switchLocalePath('zh'))

// ❌ 错误
setLocale('zh')
window.location.reload()

路径匹配判断

// ✅ 正确：使用 includes
const isPrinciplePage = route.path.includes('/principles/')

// ❌ 错误：startsWith 不适配语言前缀
const isPrinciplePage = route.path.startsWith('/principles/')