我们在之前已经制作了第一个网站、通过 Vercel 部署上线、并对其样式做了一定的美化（4-新手教程：第一个业务上线）
这一套流程涉及的操作和知识还是很多的，只不过大量操作都通过 AI 帮助我们完成了，有很多 AI 写的代码值得我们一点点去消化，看懂他是怎么做的
课程中有很多小的操作隐藏了，可是通过课后作业的完成、以及大家的讨论，发现很多基本的操作是需要讲解的，很多基础的知识是需要补全的
所以我打算在这个阶段，对过去课程和开发中涉及的操作进行讲解，对基本的知识进行回顾，补足那些我们略过的部分
未来我们的教学模式也会采取这样的类似 PDCA（Plan-Do-Check-Act）的方式（https://zh.wikipedia.org/wiki/PDCA）
每一个小的阶段，开始的时候先大干快上，有了阶段性成果以后，再复盘检查问题，而后 Figure out 主要问题，再进入下一个阶段的学习
✨ 查看视频和图文课件
- 关于视频
- 关于课件
- 关于 Notion
- 关于 Comment
课程使用过程中的问题
关于 Notion
- 打开新标签页查看
- 添加 Comments
- 查看 Comments
✨ 有代表性的问题
有代表性的问题
评论中讨论与反馈
HTML 标签的基本知识
-
关于 HTML 标签的补充知识
https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics
基础知识
- https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics
- https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics
其他问题
- 网络问题造成的项目初始化失败
- 命令行基础操作及目录
- 快捷键
- 基本：ctrl/command + s/z
- 查找：(shift +) ctrl/command + f
✨ 开发自己的项目
- Node 环境、淘宝源
- 直接下载已初始化好的项目
- NPM 包安装
- 本地启动
Nuxt 项目初始化过程中的问题
NPM 淘宝源
直接下载 nuxt-base 包
最终，如果实在不行，大家直接在这里 https://github.com/justincourses/nuxt-base
⚠️ 该仓库可按不同 tag 来下载安装了不通插件的版本（https://github.com/justincourses/nuxt-base/tags）
Tag Nuxt Nuxt UI Nuxt Content 最新扩展 pure-nuxt ✅ 🈚️ 🈚️ 🈚️ nuxt-ui ✅ ✅ 🈚️ 🈚️ nuxt-content ✅ ✅ ✅ 🈚️ latest ✅ ✅ ✅ ✅ 下载我初始化好的压缩包 https://github.com/justincourses/nuxt-base/archive/refs/heads/main.zip
解压以后，cd 到目录下，运行 npm install，再运行 git init，就可以进行后续的操作了
推送代码
# 定位到根目录，也就是项目目录的上一级，假设项目路径为 ~/projects/nuxt-base
cd ~/projects/nuxt-base
# 如果本地 Git 有问题，可以先删除（如果本地 git 没问题可以忽略这一步）
rm -rf .git
# 初始化 git
git init
# GitHub 上新建 repository，之后按提示以此执行
# 期间如果出现任何报错都需要查看错误原因
git remote add origin
git branch -M main
git push -u origin main
常见问题：
-
timeout 或 connect failed
打开🪜的菜单，点击其中的「复制终端命令」
在终端中粘贴、回车，之后终端里的网络会走代理
这个操作，每开一个终端都需要单独执行，因为是一次性操作
-
如果输入 git status 后，commit 中没有东西，需要先 add，可以这样操作
-
git push 没有反应、或无法登录，可以尝试使用 gh 命令行工具或者下载 GitHub 桌面端
-
Vercel 构建时报错，说图片不存在，类似下图
如果在项目中需要放置图片，请放在
public目录下，比如public/test.jpg而后，引用这个图片时，使用路径
/test.jpg即可 -
Vercel 发布失败：修改本地 git config 中的 user.email
具体来说，Vercel 在部署时会验证提交记录的作者信息，以确保提交者和 GitHub 账户匹配。如果你用来提交代码的 Git 配置中的邮箱地址（
git config user.email）没有与 GitHub 账户绑定，Vercel 会报错。解决方法：
-
检查本地 Git 配置：运行以下命令以检查当前的 Git 配置：
git config --global user.email -
更新 Git 配置：如果发现邮箱不正确或未设置，可以运行以下命令更新：
git config --global user.email "your-email@example.com"确保使用与你 GitHub 账户关联的邮箱地址。
-
验证 GitHub 账户：确认该邮箱已添加到你的 GitHub 账户中（可以在 GitHub 的“Settings” > “Emails”中查看）。
这将确保 Vercel 能够正确识别提交者身份，避免此类错误。
-
✨ 开发部署
- 打开项目
- 查看错误
- 主要操作
- 提交和同步
- 线上操作
开发工具
编辑器的选择
编辑器的使用
- 相关课程：编辑器自带命令行
- 打开项目
终端的使用
- 打开终端
- 如何退出
- 如何清空
- 多个终端
Git 的使用
如果我们本地没有 git，则可能需要先安装：
-
macOS 下安装 Git 的多种方式
在 macOS 上安装 Git 有多种方式，以下介绍几种常见的方法：
方法1：通过 Xcode 命令行工具安装（推荐）
macOS 自带 Git，只需安装 Xcode 的命令行工具即可。
步骤：
-
打开终端 (Terminal)。
-
输入以下命令：
xcode-select --install
-
弹出窗口提示是否安装命令行工具时，点击“安装”。
-
安装完成后，验证 Git 是否可用：
git --version
方法2：通过 Homebrew 安装
如果你已经安装了 Homebrew，这是最方便的安装方式。
步骤：
-
打开终端。
-
更新 Homebrew：
brew update
- 安装 Git：
brew install git
- 验证安装：
git --version
方法3：从官网下载安装包
如果你不想用命令行，也可以从 Git 官网下载并安装。
步骤：
-
前往 Git 官网。
-
下载适用于 macOS 的安装包。
-
打开下载的 .dmg 文件，并按照提示安装。
-
安装完成后，在终端输入以下命令查看版本：
git --version
配置 Git 用户信息
安装完成后，你还需要配置用户信息以正常使用 Git。
配置命令：
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"
查看配置：
git config --list
这几种方法都可以帮助你快速安装和使用 Git。如果你有 Homebrew，第二种方法会更快捷。
-
-
VSCode 终端教程：https://vscode.js.cn/docs/sourcecontrol/overview
推送代码
# 目前而言我们只需要了解以下操作
# 定位到根目录，也就是项目目录的上一级，假设项目路径为 ~/projects/nuxt-base
cd ~/projects
# 仓库地址请替换为自己的仓库
# 同步线上仓库到本地
git clone https://github.com/justincourses/nuxt-base.git
# 或者已经绑定了 key，则可以使用以下命令
git clone git@github.com:justincourses/nuxt-base.git
线上开发工具（临时）
备胎
掌握得比较好的同学
之前掌握得比较好、进度较快的同学，可能需要稍微等一下（1.1-关于课程进度和复杂度 ），在这段时间，可以消化一下之前的内容，建议做如下事
- 参考 Tailwind 的文档（https://tailwindcss.com/docs/box-shadow）和 Dribble 上设计师的设计（https://dribbble.com/shots/24163653-Waitlst-Framer-Template），优化自己页面排版和样式
- 查看 Nuxt UI 的文档（https://ui.nuxt.com/components/accordion），熟悉我们有哪些组件可用，大概可以实现哪些功能
课后作业
- 走通前面课程中的流程
- 查看、使用相关工具的各功能
- 备选：注册和使用 https://stackblitz.com/
- 有任何其他问题，欢迎在本课 comments 中讨论
课程讨论与答疑
提问默认仅你和管理员可见；管理员精选后会作为公开讨论展示。