小白AI编程

Appearance

第一次打开项目 ​

搞清楚"项目"是什么，怎么打开。

你会学到什么 ​

  • 什么是"项目"
  • 怎么在 VS Code 里打开项目
  • 项目文件夹里有什么

先别慌，先理解这件事 ​

📖 术语解释
项目（Project）：可以先把它理解成一个装着网站文件的大文件夹
文件夹：放文件的地方，没什么特别的
工作区：VS Code 打开项目后的整个工作环境

一个"项目"就是一个文件夹。

比如你做一个网页，那个网页的所有文件（HTML、CSS、图片等）都放在一个文件夹里。

这个文件夹就是你的"项目"。

项目文件夹里有什么？ ​

一个简单的网页项目可能长这样：

my-website/          ← 这是项目文件夹（也叫根目录）
├── index.html       ← 网页文件
├── style.css        ← 样式文件
└── images/          ← 图片文件夹
    └── logo.png     ← 图片
  • index.html：网页的主要内容
  • style.css：网页的样式（颜色、字体等）
  • images/：放图片的文件夹

怎么打开项目？ ​

方法一：在 VS Code 里打开 ​

  1. 打开 VS Code
  2. 点左上角"文件" → "打开文件夹"
  3. 选择你的项目文件夹
  4. 点"确定"

打开后，左边会显示文件夹里的所有文件。

方法二：直接把文件夹拖进 VS Code ​

  1. 打开 VS Code
  2. 把项目文件夹拖到 VS Code 窗口里
  3. 就打开了

遇到问题了？ ​

Q: 我没有项目文件夹怎么办？

A: 没关系，我们可以新建一个。打开 VS Code，点"文件" → "新建文件夹"，起个名字就行。

Q: 打开后左边什么都没有？

A: 可能是因为文件夹是空的。按 Ctrl+N（Windows）或 Cmd+N（Mac）新建一个文件试试。

Q: 我分不清文件和文件夹？

A: 文件夹的图标一般是一个柜子📁，文件的图标根据类型不同，比如网页文件是🌐。

下一步看什么 ​

📖 术语解释
继续：搞清楚了？可以去试着做第一个小东西了
👉 下一步看什么
做第一个小网页 →
🤔 遇到问题了？
Q: 我还是不太懂什么是项目
A: 没关系，先照着教程做一遍，做着做着就懂了。
Q: 我可以跳过这一步直接做网页吗
A: 可以，但建议先知道“项目就是文件夹”这个概念，后面会有用。