Web Course 1 - 基础：环境准备

账号

平台账号的注册我们在上一期提到过

这里还是快速演示一下，我会使用一个全新的账号来进行演示

必须

课程账号：https://justincourse.com

GitHub 注册和使用

• 注册地址：https://github.com/signup?source=form-home-signup&user_email=
• VSCode 或者 Cursor 可以直接跟 GitHub 仓库关联
  • 官方教程：https://code.visualstudio.com/docs/sourcecontrol/intro-to-git
  • 方法：
    • 确认在 GitHub 中已创建 Git 仓库
    • 打开 VSCode
    • 选择克隆 Git 仓库
    • 登录 GitHub 账号
    • 选择对应的远端 Git 仓库
    • 打开仓库
• 如果希望使用更顺滑，可以考虑添加 Key：https://github.com/settings/keys
  • 如果不添加 Key，在使用时（https 方式）每次会要求输入用户名密码
  • 本地添加 SSH Key 就好，说明在此：
    • https://docs.github.com/en/authentication/connecting-to-github-with-ssh
    • https://www.perplexity.ai/search/windows-he-mac-shang-ssh-keys-ozJI8wJnSDmYxzOMib0h2A#0（AI 生成的教程）

Vercel （https://vercel.com/） 可以直接使用 GitHub 注册，如果不需要绑定独立域名的话就暂时用不上其他设置

• 部署用，体验比 CloudFlare 好，所以作为课程中优先使用的平台
• 后期价格较贵（如果要上生产，后期可以考虑迁移到 CloudFlare）

课程相关的 GitHub：

• 课程相关 GitHub 仓库： 源码仓库
• 可填写此表，以后创建私有仓库时会优先批量导入：学员信息收集

可选

Cloudflare 的注册以后，就可以不管了，不过感兴趣的朋友也可以考虑买个 domain（https://developers.cloudflare.com/registrar/get-started/register-domain），要不就用附送的 domain 也是勉强可以的

• 主要用来部署 workers 或 pages
• 其次是域名的购买和管理

---

本地

接下来是装环境，我会以 macOS 为例（因为编辑器和命令行的操作不会有太大不同，所以只要不是特殊情况，未来都会主要以 macOS 为基础进行演示）快速走一遍主要环境、包括 Node、IDE 和 AI Copilot 的安装、配置和验证

命令行环境

以下仅为推荐，如果已有喜欢的 Terminal 工具可以沿用

• Windows：https://learn.microsoft.com/zh-cn/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.4
• macOS：
  • Terminal：https://support.apple.com/zh-cn/guide/terminal/welcome/mac
  • zsh：https://ohmyz.sh/
  • iTerm2：https://iterm2.com/

编辑器自带命令行

• 补充一个关于 VSCode 命令行使用的说明：
  • https://vscode.js.cn/docs/terminal/getting-started
• 如果没有什么特殊需求，开发时直接使用这个命令行工具也可以，以上说明在 Cursor 中应该也适用

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

Node 安装

现在 Nodejs 官方已经推荐直接使用包管理工具来安装了（https://nodejs.org/en/download/package-manager/current）

• 原生安装：https://nodejs.org/en
  • 官方离线安装包下载列表：https://nodejs.org/dist/
• Windows：https://github.com/Schniz/fnm
• macOS：https://github.com/nvm-sh/nvm
• 我们推荐安装 LTS 版本
• 官方列举的所有 Node 版本管理器：
  • https://nodejs.org/en/download/package-manager/all

Node 配置

默认版本的设置（需要注意的是，每次有新的 LTS 版本发布时，需要重新运行这些命令来更新到最新的 LTS 版本）：

• fnm 中 node 默认版本的设置

  对于 fnm (Fast Node Manager):

  1. 安装最新的 LTS 版本:

     fnm install --lts
     

  2. 使用该版本:

     fnm use lts-latest
     

  3. 设置为默认版本:

     fnm default $(fnm current)
     

• nvm 中 node 默认版本的设置

  对于 nvm (Node Version Manager):

  1. 首先，安装最新的 LTS 版本:

     nvm install --lts
     
     # 也可以查看一下已经安装成功的包
     nvm ls
     

  2. 然后，将其设置为默认版本（https://github.com/nvm-sh/nvm?tab=security-ov-file）:

     nvm alias default lts/*
     
     # 如果失败，可以尝试下面的命令安装后再试
     nvm install lts/*
     

     关于 nvmrc 的使用：https://github.com/nvm-sh/nvm?tab=readme-ov-file#nvmrc

包管理工具

市面上有太多的 Node 包管理工具，在此我们为了降低课程复杂度，以 npm 为主（目前，Nodejs 安装以后就会自动包含 npm 10.8.2 版本）

• 关于各种 Node 包管理工具介绍

  https://nodesource.com/blog/nodejs-package-manager-comparative-guide-2024/

  以下是一些主要的，大家感兴趣的话可以考虑试用

  • NPM：https://docs.npmjs.com/about-npm
  • YARN：https://yarnpkg.com/getting-started/usage
  • PNPM：https://pnpm.io/pnpm-cli

在国内使用时，需要把 npm registry 切换为阿里云（https://www.npmmirror.com/）

npm config set registry https://registry.npmmirror.com

或者也可以使用小火箭中的 port（https://gist.github.com/fearblackcat/850c6e027d5a03017c44daaa6a7ffc30）

浏览器

一般来说，有 Chrome（https://support.google.com/chrome/answer/95346?hl=en&co=GENIE.Platform=Desktop）就够了，不过我个人推荐使用一个独立的浏览器来做开发，跟自己平时使用的那个区分开，最好邮箱等信息也独立使用

这样工作和生活不会混到一起，自己一些比较私密的信息，也不会跟开发时胡乱注册的网站有交集

所以推荐安装 Chromium，他是 Chrome 的开发版，可以装 Chrome 市场的所有扩展，但又是一个独立的浏览器（下载链接：https://download-chromium.appspot.com/）

• Windows 版：https://download-chromium.appspot.com/?platform=Win_x64&type=snapshots

插件主要是安装以下两个，其他的按需即可：

• Vue 插件：https://devtools.vuejs.org/getting-started/installation
• Nuxt 插件：https://chromewebstore.google.com/detail/nuxt-assistant/nebkdnlhchcbbjpgfmhifafhfjipphgi

其实 Nuxtjs 本地启动后会提供一个 Devtools，可以看看相关文档：https://devtools.nuxt.com/guide/getting-started

开发工具

• Cursor: https://www.cursor.com/
• VSCode: https://code.visualstudio.com/
  • Codeium: https://codeium.com/
  • Copilot: https://github.com/features/copilot

我会演示两套方案的使用，并在后续课程中轮换使用，也试试不同方案之间的体验区别

PS：感谢 @ermian 同学的补充，Cursor 现在已经有 Windows 版，那我们上课就优先用这个

在线工具

这一小节视频里没有说，是一个有可能出现的场景，补充在此

如果我们临时在一个没有配置环境的机器上，或者遇到环境错乱了、没有配置好环境等情况，也可以使用下面的在线开发平台，虽然功能和性能跟本地还有一点差距，但是用来学习是没有问题的

• StackBlitz: https://stackblitz.com/
• CodePen: https://codepen.io/

课后作业

这节课介绍了账号的创建以及本地环境的搭建，所以大家需要自行完成相关内容

• 账号注册：GitHub、Vercel
• 本地环境：
  • 需要安装成功 Node 的 LTS 版本
  • 浏览器 Chrome/Chromium 要至少有一个
    • Apple Chip Mac 可参考：https://blog.heyfe.org/blog/mac-arm-chromium.html
• 命令行工具：
  • 确认命令行工具可用
  • 尝试在命令行工具中查看 node 和 npm 版本
• 开发工具：
  • Cursor 和 VSCode 二选一
  • （可选）如果选择了 VSCode，可以考虑注册和安装 Codeium

问题与解答

• nvm 切换 Node 版本的时候 npm 版本也会跟着变化，是否两者有绑定关系？

  这个问题我们可以通过在 Terminal 终端中输入 which node 和 which npm 来验证，当我们在 lts/* 版本时，可以得到如下返回

  我们会发现，所谓切换 node 版本就是把路径指向进行了切换

  

  而后我们切换一个版本，再看结果