Web Course 3 - 新手教程：基于官方模版的开发部署

上次（2-基础：理论基础、**什么是 Nuxt？）我们完成了 Nuxt 在本地的 Hello World 🎉

这节课我们来在此基础上进行扩展，我们会干这几件事：

1. 看看 Nuxt 项目的代码目录结构 https://nuxt.com/docs/guide/directory-structure/app
   1. 认识 config 文件
   2. 认识 pages 目录
2. 新增页面、做代码迁移
3. 安装 Nuxt UI（已经包含了 Tailwind）
   1. 需要完成 **Setup** 中的四个步骤
4. 改进页面：大标题、描述、大按钮链接

接下来，我们来发布这个网站，有如下操作：

1. 创建 Github 仓库 https://github.com/new
2. 本地代码同步（基本理论：https://rogerdudler.github.io/git-guide/index.zh.html）
3. Vercel 部署

课后作业

• 安装 Nuxt UI（简单查看 Tailwind 和 NuxtUI 使用文档）
• 完成自己的欢迎页面（随意组合 Nuxt UI 的组件）
• 创建 Github 仓库并上传本地代码
  • 本地 Git 邮箱需要跟 GitHub 中绑定 Vercel 授权的 email 一致
  • Git 邮箱的配置方法见下方
• 在 Vercel 中发布这个应用
• 申请 GitHub 仓库访问权限见 源码仓库

💡 关于本地 Git 的安装及配置

如果我们本地没有 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，第二种方法会更快捷。

💡 Nuxt UI 安装如果出现了网络问题，可以使用手工安装的方式（前提是已经配置好淘宝源 https://www.npmmirror.com/）：

# 安装 @nuxt/ui
npm install -S @nuxt/ui

之后，在 nuxt.config.ts 文件下

export default defineNuxtConfig({
	// 改动只看下面这一行，别的不用管
  modules: ['@nuxt/ui']
})

使用课程中的源码，可能会出现 X 和 WeChat 的图标有时候显示有时候不显示的情况，可以在本地安装对应的包加速

npm install @iconify-json/simple-icons --save-dev

https://www.npmjs.com/package/@iconify-json/simple-icons

知识扩展

• 了解 Markdown 语法（https://docs.github.com/zh/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax）