🏠

Nuxt页面与组件实战

前端开发的两大核心元素

讲师：乌鸦哥

🧩 前端的基本组成

就像搭积木一样简单

📄 页面 (Pages)

网站的各个界面

首页、关于我们、联系我们...

🔧 组件 (Components)

可重复使用的部件

导航栏、按钮、卡片...

💡 不管什么前端框架，都是这两个核心元素组成的！

📁 Nuxt项目结构探索

初来乍到，这些文件夹都是什么？

项目目录初印象

🤔 看到一堆陌生的文件夹？

😅 作为新手，先别慌！

📚 详细用途可以去官方网站查看

🎯 我们只关注要做的东西！

创建核心文件夹

在根目录创建两个重要文件夹

📁 pages

存放页面文件

英文：页面的意思

📁 components

存放组件文件

英文：组件的意思

💡 英文好的朋友看名字就知道了对不对！

📄 创建我们的第一个页面

让网站有内容可看

规划网站页面

你希望你的网站有几个页面呢？

🏠 首页 (index.vue)

网站的门面，第一印象很重要

📞 联系我们 (contact.vue)

让访客能够联系到你

实际操作步骤

  1. 在 pages 文件夹下创建 index.vue
  2. 写一些简单的首页内容
  3. 再创建 contact.vue 联系我们页面
  4. 在浏览器中查看两个页面

🎉 很好！是不是非常简单？我们已经有两个页面了！

🤔 咦，少了点什么？

经常使用网站的小朋友们都知道...

网站还缺什么？

🧭 导航栏 - 帮助用户在页面间跳转

🏷️ Logo - 品牌标识

📋 菜单 - 各个页面的链接

💭 这些应该属于什么呢？

💡 当然是组件！因为它们是重复使用的

🔧 创建导航组件

让AI帮我们写个专业的导航

组件创建步骤

  1. 在 components 文件夹下新建文件
  2. 比如叫 Header.vue 或 Navigation.vue
  3. 让AI帮我们写导航代码
  4. 包含到我们两个页面的链接

🤖 AI写出来了！看起来很专业对吧？

🔗 引入组件到页面

最后一步：让组件出现在网站上

如何引入组件？

在 app.vue 文件中引入我们的头部组件


<template>
  <Header />
  <NuxtPage />
</template>

🎉 然后就完事了，对就这么简单！

🎯 总结回顾

我们都学会了什么？

今天的成果

  • 📁 理解了项目结构 - pages 和 components
  • 📄 创建了页面 - 首页和联系我们页面
  • 🔧 制作了组件 - 导航栏组件
  • 🔗 学会了引入 - 在app.vue中使用组件

核心概念巩固

📄 页面 (Pages)

  • 独立的网页界面
  • 用户可以直接访问
  • 有自己的URL路径

🔧 组件 (Components)

  • 可重复使用的部件
  • 在多个页面中使用
  • 提高代码复用性

🚀 下一步

继续完善我们的网站

  • 🎨 美化页面样式
  • ➕ 添加更多页面
  • 🔧 创建更多有用的组件
  • ⚡ 添加交互功能

记住：从简单开始，逐渐完善！