《Nuxt.js入门宝典：1小时从懵逼到实战，真香！》

miss
2 阅读5分钟

《Nuxt.js入门宝典：1小时从懵逼到实战，真香！》

本文能帮你节省大量查阅文档的时间，直接上手实战

前言：为什么选择Nuxt.js？

先来看个对比，你就明白Nuxt.js的魅力了：

特性传统Vue项目Nuxt.js项目
SEO支持需要额外配置SSR开箱即用
路由配置手动配置每个页面自动生成
代码组织分散在不同文件约定优于配置
首屏加载相对较慢极速加载

简单说，Nuxt.js就是Vue.js的超级增强版，让你开发效率提升300%！

一、Nuxt.js核心概念（5分钟看懂）

1.1 文件即路由

这是Nuxt最神奇的地方！看看这个目录结构：

pages/
├── index.vue          # -> 路由：/
├── about.vue          # -> 路由：/about
└── users/
    ├── index.vue      # -> 路由：/users
    └── [id].vue       # -> 路由：/users/123

不用写路由配置！  创建文件就等于创建路由。

1.2 渲染模式对比

// nuxt.config.js
export default {
  // SSR: 服务端渲染（SEO友好）
  ssr: true,
  
  // 或者 SPA: 单页面应用
  ssr: false,
  
  // 或者 SSG: 静态站点生成
  target: 'static'
}

二、环境搭建（10分钟搞定）

2.1 快速创建项目

# 使用npx一键创建
npx create-nuxt-app my-nuxt-demo

# 或者用官方推荐方式
npx nuxi init my-nuxt-demo
cd my-nuxt-demo
npm install

2.2 目录结构解析

my-nuxt-demo/
├── pages/          # 页面组件（自动生成路由）
├── components/     # 可复用组件
├── layouts/        # 布局组件
├── assets/         # 静态资源
├── public/         # 公共文件
├── store/          # Vuex状态管理
└── nuxt.config.js  # 配置文件

三、实战项目：做个「程序员冷笑话生成器」😄

3.1 项目功能规划

  • 随机显示程序员相关冷笑话
  • 点赞/踩功能
  • 分享到社交媒体
  • 响应式设计

3.2 第一步：创建布局

<!-- layouts/default.vue -->
<template>
  <div class="app-container">
    <header class="app-header">
      <h1>🤖 程序员冷笑话生成器</h1>
      <p>专治各种代码无聊症</p>
    </header>
    
    <main class="main-content">
      <NuxtPage />
    </main>
    
    <footer class="app-footer">
      <p>Made with ❤️ using Nuxt.js</p>
    </footer>
  </div>
</template>

<style>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem;
  text-align: center;
}

.main-content {
  flex: 1;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.app-footer {
  background: #f5f5f5;
  padding: 1rem;
  text-align: center;
}
</style>

3.3 第二步：创建首页

<!-- pages/index.vue -->
<template>
  <div class="joke-generator">
    <div class="joke-card" :class="{ 'loading': loading }">
      <div v-if="loading" class="loading-spinner">
        <div class="spinner"></div>
        <p>正在生成冷笑话...</p>
      </div>
      
      <div v-else class="joke-content">
        <h2>{{ currentJoke.title }}</h2>
        <p class="joke-text">{{ currentJoke.content }}</p>
        <p class="joke-punchline">{{ currentJoke.punchline }}</p>
        
        <div class="reaction-buttons">
          <button @click="likeJoke" class="btn like-btn">
            👍 {{ likes }}
          </button>
          <button @click="dislikeJoke" class="btn dislike-btn">
            👎 {{ dislikes }}
          </button>
          <button @click="shareJoke" class="btn share-btn">
            🔗 分享
          </button>
        </div>
      </div>
    </div>
    
    <button @click="getNewJoke" class="new-joke-btn">
      🎲 再来一个冷笑话
    </button>
  </div>
</template>

<script setup>
// 使用Nuxt 3的响应式语法
const jokes = [
  {
    title: "程序员的生活",
    content: "为什么程序员总是分不清万圣节和圣诞节？",
    punchline: "因为 Oct 31 == Dec 25"
  },
  {
    title: "BUG的哲学",
    content: "程序员最讨厌的数字是什么？",
    punchline: "0，因为经常被它除"
  },
  {
    title: "硬件冷笑话",
    content: "为什么键盘这么自信？",
    punchline: "因为它总是有键解（见解）"
  }
];

const currentJoke = ref(jokes[0]);
const loading = ref(false);
const likes = ref(0);
const dislikes = ref(0);

const getNewJoke = () => {
  loading.value = true;
  
  // 模拟加载效果
  setTimeout(() => {
    const randomIndex = Math.floor(Math.random() * jokes.length);
    currentJoke.value = jokes[randomIndex];
    loading.value = false;
  }, 800);
};

const likeJoke = () => {
  likes.value++;
};

const dislikeJoke = () => {
  dislikes.value++;
};

const shareJoke = () => {
  if (navigator.share) {
    navigator.share({
      title: currentJoke.value.title,
      text: currentJoke.value.content + ' ' + currentJoke.value.punchline,
      url: window.location.href
    });
  } else {
    alert('冷笑话已复制到剪贴板！');
  }
};
</script>

<style scoped>
.joke-generator {
  text-align: center;
}

.joke-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  text-align: center;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.joke-text {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.joke-punchline {
  font-size: 1.4rem;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 2rem;
}

.reaction-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.like-btn { background: #e8f5e8; color: #2e7d32; }
.dislike-btn { background: #ffebee; color: #c62828; }
.share-btn { background: #e3f2fd; color: #1565c0; }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.new-joke-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.new-joke-btn:hover {
  transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .reaction-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 200px;
  }
}
</style>

3.4 第三步：添加关于页面

<!-- pages/about.vue -->
<template>
  <div class="about-page">
    <h2>关于这个项目</h2>
    <p>这个冷笑话生成器使用 Nuxt.js 构建，展示了：</p>
    
    <ul>
      <li>✅ 自动路由生成</li>
      <li>✅ 服务端渲染 (SSR)</li>
      <li>✅ 响应式设计</li>
      <li>✅ 现代Vue 3语法</li>
    </ul>
    
    <div class="tech-stack">
      <h3>技术栈</h3>
      <div class="tech-badges">
        <span class="badge">Nuxt.js</span>
        <span class="badge">Vue 3</span>
        <span class="badge">TypeScript</span>
        <span class="badge">Vite</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about-page {
  max-width: 600px;
  margin: 0 auto;
}

.tech-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.badge {
  background: #667eea;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
}
</style>

四、部署上线（5分钟完成）

4.1 静态部署（推荐新手）

# 生成静态文件
npm run generate

# 部署到任意静态托管服务
# 比如Vercel、Netlify、GitHub Pages等

4.2 服务器部署

# 构建生产版本
npm run build

# 启动服务
npm start

五、Nuxt.js进阶特性

5.1 中间件使用

// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useUser();
  
  if (!user.value && to.path !== '/login') {
    return navigateTo('/login');
  }
});

5.2 API路由（全栈能力）

// server/api/jokes.get.js
export default defineEventHandler(async (event) => {
  const jokes = await fetchJokesFromDatabase();
  return { jokes };
});

六、常见问题解答

Q: Nuxt 2 和 Nuxt 3 有什么区别？

A: Nuxt 3 基于Vue 3，性能更好，开发体验更优秀。新手直接学Nuxt 3！

Q: 什么时候该用Nuxt.js？

A: 需要SEO、首屏加载速度要求高、项目复杂度中等以上时。

Q: 学习曲线陡峭吗？

A: 如果你会Vue，Nuxt.js学习成本很低，2天就能上手！

总结

通过这个实战项目，你已经掌握了：

  • ✅ Nuxt.js核心概念
  • ✅ 项目结构组织
  • ✅ 页面路由创建
  • ✅ 布局组件使用
  • ✅ 响应式设计
  • ✅ 项目部署流程
avatar
文章
阅读
粉丝