.output/ .nuxt/ app/ assets/ components/ composables/ layouts/ middleware/ pages/ plugins/ utils/ app.config.ts app.vue router.options.ts content/ layers/ modules/ node_modules/ public/ shared/ server/ api/ middleware/ plugins/ routes/ utils/ nux.config.ts
- Nuxt 的构建输出目录，包含编译后的文件
- 通常需要添加到
.gitignore中
项目的主要源代码目录，包含：
assets/- 静态资源文件，如样式、图片等components/- Vue 组件，会自动导入composables/- Vue 组合式 API 函数layouts/- 页面布局组件middleware/- 路由中间件pages/- 页面组件，用于自动生成路由plugins/- Nuxt 插件utils/- 工具函数app.config.ts- 应用配置文件app.vue- 应用根组件router.options.ts- 路由配置选项
- 用于存储内容文件，通常与 Nuxt Content 模块一起使用
- 静态资源目录，存放不需要构建处理的文件
- 文件会直接复制到构建输出目录的根部
- 服务端代码目录，包含：
api/- API 路由middleware/- 服务端中间件plugins/- 服务端插件routes/- 自定义路由utils/- 服务端工具函数
nuxt.config.ts- Nuxt 项目的主配置文件package.json- 项目依赖和脚本配置node_modules/- 项目依赖包layers/- Nuxt 层（Layers）配置modules/- 本地 Nuxt 模块shared/- 客户端和服务端共享的代码
本章节提供了纯静态单页面网站（Single Page Website）的完整元素指南，适用于构建只有一个HTML文件的静态网站。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 元数据区域 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站标题</title>
<meta name="description" content="网站描述">
<!-- SEO优化 -->
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="分享图片URL">
<meta property="og:url" content="页面URL">
<!-- 样式和资源 -->
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- 页面内容 -->
<header>...</header>
<main>...</main>
<footer>...</footer>
<!-- 脚本 -->
<script src="script.js"></script>
</body>
</html>
- Logo/品牌标识：通常放在左上角
- 导航菜单：即使单页面，也可能有锚点链接（如：#about, #services, #contact）
- 响应式汉堡菜单：移动端适配
- 英雄区域：大图背景、主标题、副标题、行动按钮
- 关于我们：公司/个人介绍
- 服务/产品展示：卡片式布局、网格展示
- 作品集/案例：图片画廊、项目展示
- 团队介绍：成员卡片
- 客户评价：轮播或静态展示
- 统计数据：数字计数器（如：项目数、客户数等）
- 联系信息：地址、电话、邮箱
- 社交媒体链接：图标链接到社交平台
- 版权信息：© 年份 公司名
- 备用导航：重要链接的重复
- 订阅表单：邮件订阅
- 按钮：主要行动按钮、次要按钮、幽灵按钮
- 表单：联系表单、搜索框、订阅表单
- 模态框：点击后弹出的对话框
- 标签页：内容切换
- 手风琴：可展开/收起的内容区域
- 回到顶部：滚动到一定位置后显示的按钮
- 图片：优化过的WebP/JPEG/PNG格式，支持懒加载
- 视频：背景视频、嵌入式视频
- 图标：SVG图标、图标字体
- 轮播图：图片或内容轮播
<!-- Twitter卡片 -->
<meta name="twitter:card" content="summary_large_image">
<!-- 结构化数据 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "网站名称",
"url": "https://example.com"
}
</script>
- 图片懒加载：
loading="lazy"属性 - CSS关键路径：首屏样式内联
- 字体优化：字体显示策略
- 资源预加载：
rel="preload"
- ARIA标签：为屏幕阅读器提供语义
- 键盘导航：tabindex属性
- 颜色对比度：WCAG 2.1标准
- 跳过导航链接：帮助键盘用户快速跳转
单页面网站/ ├── index.html # 主HTML文件 ├── styles.css # 样式文件 ├── script.js # JavaScript文件 ├── favicon.ico # 网站图标 ├── robots.txt # 搜索引擎爬虫规则 ├── sitemap.xml # 网站地图 ├── images/ # 图片资源 │ ├── hero-bg.jpg │ ├── logo.svg │ └── team/ ├── fonts/ # 字体文件 │ └── custom-font.woff2 └── assets/ # 其他资源 └── icons/
- 单列滚动式：所有内容垂直排列，通过滚动浏览
- 全屏分节式：每节占据全屏高度，通过滚动或导航切换
- 视差滚动式：背景和前景以不同速度滚动
- 卡片网格式：内容以卡片形式网格排列
- 移动优先：确保在各种设备上都有良好体验
- 快速加载：优化图片、压缩资源、使用CDN
- 渐进增强：确保核心功能在JavaScript禁用时仍可用
- 语义化HTML：使用正确的HTML5语义标签
- 测试兼容性：在主流浏览器中测试显示效果
这些元素和模式可以帮助您构建专业、高效、用户友好的静态单页面网站。
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
