Web Course 4 - 新手教程：第一个业务上线

我们在上节课中，已经上线了第一个网站，临时链接到了 x 资料页面。接下来我们还可以干什么呢？

先搞个期货，搞个 waitlist 吧 😁

实现思路

先参考一下别人的设计

• 全部：https://dribbble.com/search/shots/popular/web-design?q=waitlist
• 选中：https://dribbble.com/shots/24163653-Waitlst-Framer-Template
  • 设计原稿：https://framer.com/projects/new?duplicate=tIhlOBe6f92AEHmwcX2A&via=johnnykyorov

接着考虑目标和原则

• 目标
  • 完成最基本的介绍，达到收集 waitlist 的效果
  • 添加社交链接
  • 美化页面
• 原则
  • 尽可能使用 AI 完成代码
  • 尽可能使用 tailwind样式 + nuxt ui 组件

核心功能

• 全新首页重构：
  • 背景图（https://tailwindcss.com/docs/background-attachment）
    • 素材图片 https://unsplash.com/t/architecture-interior
    • 背景尺寸的调整 https://tailwindcss.com/docs/background-size
  • 背景框（https://tailwindcss.com/docs/backdrop-blur、https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter）
    • 标题（https://tailwindcss.com/docs/font-family）
    • 介绍
  • 大按钮（https://ui.nuxt.com/components/button#black）
    • 一个 waitlist 表单
    • 表单（第三方） https://forms.office.com/
• 社交链接（https://tailwindcss.com/docs/justify-content#center、https://ui.nuxt.com/components/link、https://ui.nuxt.com/components/icon）
  • X
  • 微信公众号
  • 课程 Link

关于 AI 写代码（1-基础：环境准备 ）

• 首选 Cursor（Plus 试用一个月）
• 其次 VSCode + Codeium（免费方案）
• 辅助 ChatGPT/Claude（免费 or 收费）

Cursor 中的终端开启方式

课程源码仓库及使用：

• 源码查看：https://github.com/justincourses/share-web-course-1
• 客户端（选装）：https://docs.github.com/zh/desktop/installing-and-authenticating-to-github-desktop/installing-github-desktop
• 注意：请不要 push 代码（会定时强制覆盖）

课程中完成的网站：

• ✈️ https://web-course-1.vercel.app/

课后作业

• 完成自己首页的重构，达成如下目标
  • 下载并更换背景图
  • 添加 waitlist 到按钮
  • 添加社交链接并搭配图标
  • 发布重构后的网站
• GitHub、登录、并查看课程源码
  • 完成上一课（3-新手教程：基于官方模版的开发部署) 课后作业中的 GitHub 账号提交

如果我们本地没有 git，则可能需要先安装：

• 安装包方式：https://git-scm.com/downloads

• macOS 下安装 Git 的多种方式

  在 macOS 上安装 Git 有多种方式，以下介绍几种常见的方法：

  方法1：通过 Xcode 命令行工具安装（推荐）

  macOS 自带 Git，只需安装 Xcode 的命令行工具即可。

  步骤：

  1. 打开终端 (Terminal)。

  2. 输入以下命令：

  xcode-select --install

  3. 弹出窗口提示是否安装命令行工具时，点击“安装”。

  4. 安装完成后，验证 Git 是否可用：

  git --version

  方法2：通过 Homebrew 安装

  如果你已经安装了 Homebrew，这是最方便的安装方式。

  步骤：

  1. 打开终端。

  2. 更新 Homebrew：

  brew update

  3. 安装 Git：

  brew install git

  4. 验证安装：

  git --version

  方法3：从官网下载安装包

  如果你不想用命令行，也可以从 Git 官网下载并安装。

  步骤：

  1. 前往 Git 官网。

  2. 下载适用于 macOS 的安装包。

  3. 打开下载的 .dmg 文件，并按照提示安装。

  4. 安装完成后，在终端输入以下命令查看版本：

  git --version

  配置 Git 用户信息

  安装完成后，你还需要配置用户信息以正常使用 Git。

  配置命令：

  git config --global user.name "你的名字"

  git config --global user.email "你的邮箱"

  查看配置：

  git config --list

  这几种方法都可以帮助你快速安装和使用 Git。如果你有 Homebrew，第二种方法会更快捷。