🚀 Nuxt 摄影项目（一）：从零搭建Nuxt摄影集项目记录从零开始搭建 Nuxt 摄影网站的完整过程，包括使用 pn

前言

自从买了相机 📷 后，我一直想拥有一个自己的摄影网站。断断续续拖了一年，终于决定把它做出来。

整个项目的架构计划如下：

前端：Nuxt（只负责前端渲染）
UI：Nuxt UI
后端：NestJS（TypeScript）

为什么前端用 Nuxt？
不是为了 SEO，也不是为了首屏优化，而是——想尝鲜。
平时工作一直用 Vue，因此基于它的 Nuxt 上手成本更低。

为什么 Nuxt 里写 JavaScript 而 Nest 用 TypeScript？
因为这次重心是前端页面内容，JS可以更快产出。而 TS 在NestJS里用起来几乎没有负担，也有更好的提示。
所以：

Nuxt → JS（快速开发）
Nest → TS（更规范）

🔗 系列文章导航

章节	链接
（一）项目搭建（当前）	juejin.cn/post/757213…
（二）基础组件 & 主题切换	juejin.cn/post/757213…

本文会带你从 0 开始搭建一个 Nuxt 前端项目（不包含后端部分）。

1. 创建项目

使用 pnpm 创建项目：

pnpm create nuxt <project-name>

创建过程中会经过几个交互步骤：

① 选择包管理工具

Which package manager would you like to use?
○ npm
● pnpm (current)
○ yarn
○ bun
○ deno

选择 pnpm。

② 是否初始化 Git 仓库

Initialize git repository?
● Yes / ○ No

建议选择 Yes，方便后续版本控制。

③ 是否安装官方模块

Would you like to install any of the official modules?
○ Yes / ● No

我这里选择 Yes。

④ 选择模块安装

可以通过空格键多选：

@nuxt/content – The file-based CMS with support for Markdown, YAML, JSON
◻ @nuxt/eslint – Project-aware, easy-to-use, extensible and future-proof ESLint integration
◻ @nuxt/fonts – Add custom web fonts with performance in mind
◻ @nuxt/hints – Nuxt module that shows hints for aspects of your application such as Performance, Security, and more!
◻ @nuxt/icon – Icon module for Nuxt with 200,000+ ready to use icons from Iconify
◻ @nuxt/image – Add images with progressive processing, lazy-loading, resizing and providers support
◻ @nuxt/scripts – Add 3rd-party scripts without sacrificing performance
◻ @nuxt/test-utils – Test utilities for Nuxt
◻ @nuxt/ui – The Intuitive UI Library powered by Reka UI and Tailwind CSS

我安装了：

@nuxt/eslint
@nuxt/image
@nuxt/icon
@nuxt/ui

2. 完善项目目录结构

Nuxt 默认结构比较简洁，我习惯手动补齐一些日常必备目录：

app/
 ├─ components/
 ├─ layouts/
 ├─ pages/
 ├─ utils/
 └─ composables/

新增全局错误页面

app/error.vue
用于在找不到页面时展示自定义错误。

3. 配置 Tailwind CSS

① 安装 tailwindcss（Vite 版本）

pnpm add tailwindcss @tailwindcss/vite

② 修改 `nuxt.config.js`

// https://nuxt.com/docs/api/configuration/nuxt-config
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
    components: true,
    compatibilityDate: '2025-07-15',
    devtools: { enabled: true },
    modules: ['@nuxt/eslint', '@nuxt/image', '@nuxt/ui'],
    css: ['~/assets/css/main.css'],
    colorMode: {
        preference: 'system', // 默认跟随系统
        fallback: 'dark',     // SSR 时的回退值
    },
    ui: {
        experimental: {
            componentDetection: true
        },
        global: true // 全局预加载样式
    },
    vite: {
        plugins: [tailwindcss()],
    },
    alias: {}
});

③ 新增全局样式文件

路径：app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

@layer base {
    button:not([disabled]),
    [role="button"]:not([disabled]) {
        cursor: pointer;
    }
}

4. 让 WebStorm 识别 Nuxt UI 组件（可选）

新增 jsconfig.json：

{
  "extends": "./.nuxt/tsconfig.json"
}

让编辑器能够正常智能提示。

5. 初步项目结构搭建完毕

到这里，一个基础的 Nuxt + Tailwind + Nuxt UI 项目就准备好了。

6. 效果展示

接下来我会开始进行页面框架的搭建，包括：

头部导航、底部信息
虚拟瀑布流（相片展示）
关于我
画廊列表页
画廊详情页
照片地图
发布部署至服务器

未来这些会逐篇发布成系列文章。

🚀 Nuxt 摄影项目（一）：从零搭建Nuxt摄影集项目

前言