{"meta":{"title":"在本地开发项目","intro":"了解如何通过一个基于 HTML、CSS 和 JavaScript 的示例客户端应用程序来创建本地开发环境。","product":"开始","breadcrumbs":[{"href":"/zh/get-started","title":"开始"},{"href":"/zh/get-started/learning-to-code","title":"学习编写代码"},{"href":"/zh/get-started/learning-to-code/developing-your-project-locally","title":"本地开发"}],"documentType":"article"},"body":"# 在本地开发项目\n\n了解如何通过一个基于 HTML、CSS 和 JavaScript 的示例客户端应用程序来创建本地开发环境。\n\n## 概述\n\n“本地开发”是指在你自己的计算机上运行你的项目，而不是在云中或远程服务器上运行****。 在本地开发时，你可以在没有 Internet 连接的情况下编写代码，也可以进行试验而不会影响线上应用程序。\n\n配置本地开发环境所需的步骤因项目所使用的编程语言、框架、工具和依赖项而异。 在本指南中，你将通过一个基于 HTML、CSS 和 JavaScript 构建的客户端应用程序示例，掌握核心技能，这些技能是设置任何项目所必需的****。 之后你可以将这些技能应用到未来的其他项目中。\n\n## 安装基本开发工具\n\n在开始之前，你需要安装一些本地开发中广泛使用的基本工具。\n\n1.               [使用 VS Code 设置 GitHub Copilot](https://code.visualstudio.com/docs/copilot/setup-simplified)。\n1. [安装 Git](https://git-scm.com/downloads)。\n\n## 在 VS Code 中克隆并打开仓库\n\n首先，通过克隆在计算机上复制存储库。\n\n1. [从克隆 new2code/client-side-web-application 仓库开始](vscode://vscode.git/clone?url=https://github.com/new2code/client-side-web-application)。 此链接会在 VS Code 中打开一个对话框以克隆该仓库。 <!-- markdownlint-disable-line GHD003 -->\n1. **\n**选择在计算机上保存存储库的位置，然后单击“选择为存储库目标”。\n1. 出现提示时，打开存储库。\n\n## 安装项目要求\n\n1. [Open Copilot Chat](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text)，然后要求它确定需要安装的内容，使用以下提示。 <!-- markdownlint-disable-line GHD003 -->\n\n    ```text copy\n    What do I need to install to develop this project locally? \n    ```\n\n    在本示例中，Copilot 会告诉你该项目需要 Node.js。 Node.js 支持在本地计算机上运行 JavaScript 代码，并为 Web 开发提供相关工具。\n\n1. 询问 Copilot 如何安装项目所需的内容，然后按照它提供的步骤在你的计算机上完成安装。\n\n    例如，我们可以问：“我该如何安装 Node.js？” Copilot 将提供访问 https://nodejs.org/ 和下载安装程序的说明。\n\n## 安装项目依赖项\n\n现在你已经安装了所需软件，接下来需要了解如何将它用于特定项目的开发。\n\n首先查看 README 文件****。 大多数项目都会在根目录中包含一个 README 文件，用于说明如何设置和运行该项目。 对于此项目，README 文件以及询问 Copilot 都会告诉你，下一步是使用 npm（Node.js 的包管理器）安装项目依赖项。\n\n1. 按<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>（Windows/Linux）或<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>（Mac）打开命令面板。\n\n1. 输入 `Terminal: Create New Terminal` 并按 <kbd>Enter</kbd> 键。\n\n1. 在终端选项卡中，粘贴以下命令。\n\n   ```bash copy\n   npm install\n   ```\n\n由于该项目使用 Node.js，我们使用了 `npm install` 来读取 `package.json` 文件并下载项目正常运行所需的所有依赖项。 其他类型的项目会使用不同的命令。 例如，Python项目可能使用 `pip install -r requirements.txt`，Ruby 项目可能使用 `bundle install`。\n\n如果 README 中没有提供关于安装依赖项的信息，你可以尝试以下几种方法：\n\n* **查找配置文件**：不同的项目使用不同的文件列出其依赖项，例如，Node.js 项目使用 `package.json`，Python 项目使用 `requirements.txt`，Ruby 项目使用 `Gemfile`。\n* 询问 Copilot****：你可以尝试使用以下提示：“现在我已经安装了 Node.js，设置此项目的下一步是什么？”\n\n## 运行和开发你的项目\n\n现在你已经设置好了开发环境，接下来可以启动开发服务器，并通过它预览你对代码所做的更改。\n\n1. 请查看项目文件夹中的 README 文件，了解项目启动方法。\n\n   在本示例中，README 文件中的“Steps for running locally”一节说明你可以通过运行 `npm start` 命令来启动开发服务器。 请在终端中输入以下命令。\n\n   ```bash copy\n   npm start\n   ```\n\n1. 要查看本地服务器的访问地址，请查看终端输出。 你会看到可通过 http://localhost:8080 访问本地服务器。 在浏览器中导航到该地址。\n1. 对代码做一个小更改，例如编辑 HTML 文件中的文本，或者修改 CSS 文件中的颜色。 保存所做更改。\n1. 查看项目文档或终端输出，了解如何查看你的更改结果。 有些项目在你保存更改后会自动刷新页面，而有些项目则需要你手动刷新浏览器页面。\n\n   对于此项目，请刷新浏览器页面以查看更改。\n\n如果 README 文件中没有你需要的信息，请查看配置文件中可用的命令。 还可以通过以下提示询问 [Copilot Chat](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text)。 <!-- markdownlint-disable-line GHD003 -->\n\n```text copy\nHow do I start this project locally?\n```\n\n## 接下来是什么？\n\n现在你已成功设置了第一个本地开发环境，是时候将这些技能应用到不同类型的项目中了。\n\n**练习不同的项目**：尝试建立另一个具有不同要求的项目。 例如，[@new2code的 Python Web 应用程序](https://github.com/new2code/python-web-application)使用 Python 和 Flask 而不是 Node.js。 <!-- markdownlint-disable-line GHD003 -->\n\n应用你在本教程中学到的内容执行以下操作：\n\n* 使用 VS Code 克隆存储库\n* 向 Copilot 询问你需要安装哪些工具和依赖项\n* 阅读 README 文件，了解如何运行项目\n* 在浏览器中运行该应用程序\n\n这些练习将帮助你掌握不同技术间的通用模式，并建立你对在本地设置任意项目能力的信心。"}