继昨天顺利搞定Vue开发环境后，今天正式进入实操环节——创建第一个Vue项目！原本以为创建项目会比安装环境更复杂，没想到跟着步骤敲命令、点选项，30分钟就成功启动了项目，还熟悉了项目目录结构、修改了页面内容，真切感受到了Vue的便捷，继续记录小白学习日常，给同款零基础小伙伴避坑～
今天的学习时长依然是1.5小时，核心任务分为3部分：创建Vue项目、熟悉项目目录结构、简单修改页面，全程还是“轻理论、重实操”，不用深究底层逻辑，重点是跟着做、能看到效果，慢慢建立前端开发的手感，话不多说，开启今天的学习！
一、核心操作：创建第一个Vue项目（30分钟，成就感拉满）
昨天我们已经安装好了Node.js和Vue CLI，今天就用这些工具快速创建项目，全程终端操作，步骤很固定，新手跟着敲命令就好，亲测一遍成功，没有踩坑～
- 执行创建命令：打开终端（Windows用cmd，Mac用终端），不用切换特殊目录，直接输入命令
vue create vue-demo，其中“vue-demo”是项目名称，大家可以自定义（比如vue-first-project），命名建议用小写字母，中间用横杠连接，避免出现特殊字符。 - 选择项目配置：输入命令后，终端会弹出配置选项，新手直接选择
Default ([Vue 3] babel, eslint)即可，这是Vue 3的默认配置，包含了基础的babel（用于兼容低版本浏览器）和eslint（用于代码检查），无需手动配置任何内容，省去很多麻烦。选择后按回车键，就会开始自动创建项目，耐心等待几分钟（时间取决于网络速度）。 - 进入项目目录：项目创建完成后，终端会提示“Successfully created project vue-demo”，此时输入命令
cd vue-demo，进入我们刚刚创建的项目目录（类比打开电脑里的文件夹，只有进入目录，才能执行后续的启动命令）。 - 启动项目：进入目录后，输入命令
npm run dev，终端会开始启动项目，启动成功后，会显示项目的访问地址，默认是http://localhost:5173（如果5173端口被占用，会自动切换到其他端口，终端会显示新的地址）。 - 验证项目启动成功：打开浏览器，输入终端显示的访问地址，按下回车键，如果能看到Vue的默认页面（蓝色背景、Vue图标和欢迎文字），就说明第一个Vue项目创建并启动成功啦！这一刻真的有成就感，终于迈出了Vue开发的实质性一步～
小白避坑提示：① 输入命令时不要漏写字符，比如“vue create”不要写成“vue creat”，否则会报错；② 等待项目创建时，不要关闭终端，耐心等待即可，网络慢的话可以多等几分钟；③ 启动项目后，终端不要关闭，关闭终端会导致项目停止运行，后续修改页面也无法实时预览。
二、重点环节：熟悉项目目录结构（40分钟，摸清项目“骨架”）
项目启动成功后，我们需要打开项目，熟悉每个目录和文件的作用——这就像刚拿到一个新书包，要知道哪个隔层放课本、哪个放文具，后续开发时才能快速找到需要修改的文件。新手不用死记硬背，重点记住核心目录的作用，用到时能找到即可。
推荐使用VS Code打开项目（免费、轻量，而且对Vue开发非常友好），安装完成后，打开VS Code，点击“文件”→“打开文件夹”，选择我们创建的“vue-demo”项目目录，即可打开整个项目。打开后，左侧会显示项目的目录结构，对照以下说明，逐一熟悉：
vue-demo/ # 项目根目录（整个项目的“大文件夹”，包含所有文件）
├── public/ # 静态资源目录（存放图片、HTML等静态文件，无需手动修改）
│ └── favicon.ico # 项目图标（浏览器标签页显示的小图标）
├── src/ # 核心代码目录（重点关注！后续所有开发都在这里进行）
│ ├── assets/ # 资源目录（存放自己的图片、CSS样式文件等）
│ ├── components/ # 组件目录（后续学习组件化开发时，用来存放可复用的组件）
│ ├── App.vue # 根组件（页面的核心容器，所有页面内容都嵌套在这个组件里）
│ └── main.js # 入口文件（初始化Vue应用，相当于项目的“启动开关”，无需频繁修改）
├── package.json # 项目依赖配置文件（自动生成，管理项目所需的依赖，无需手动修改）
└── vue.config.js # Vue配置文件（后续可配置端口、跨域等高级功能，初期无需修改）
补充说明（小白必看）：① src目录是我们后续开发的核心，比如写页面、写组件，都在这个目录里操作；② public目录里的文件是静态的，不会被Vue处理，比如我们想添加一张背景图，就可以放到public目录下；③ components目录现在是空的，后续我们学习组件化开发时，会在这里创建自己的组件；④ App.vue和main.js是项目启动的关键，初期不要随意修改，避免项目无法正常运行。
这一步建议花40分钟，慢慢熟悉每个目录的位置和作用，也可以双击打开每个文件，简单看一下里面的内容（不用看懂代码，只需要知道这个文件是做什么的），为后续修改页面、学习语法打下基础。
三、趣味实操：简单修改页面（20分钟，感受Vue的“实时更新”）
熟悉完目录结构后，我们来做一个简单又有趣的操作——修改页面内容，感受Vue的“实时更新”特性（修改代码后，浏览器会自动刷新，不用手动刷新页面，非常便捷），这也是Vue的核心优势之一。
- 打开需要修改的文件：在VS Code左侧的目录结构中，找到
src/App.vue文件，双击打开，这是我们项目的根组件，也是当前浏览器显示的页面内容所在的文件。 - 修改页面文字：打开App.vue后，我们会看到里面有三部分内容（template、script、style），新手重点关注template部分（这部分是页面的结构和文字），找到里面的
<h1>Welcome to Your Vue.js App</h1>，将这句话改成自己喜欢的文字，比如<h1>我的第一个Vue项目</h1>。 - 保存文件并查看效果：修改完成后，按
Ctrl+S（Windows）或Command+S（Mac）保存文件，此时再回到浏览器，会发现页面已经自动刷新，刚才修改的文字已经显示在页面上了！ - 拓展尝试：可以继续修改页面中的其他文字，比如将
<p>Installed CLI Plugins</p>改成<p>Vue零基础学习打卡第2天</p>，保存后查看效果，真切感受Vue“实时更新”的便捷，也能增加学习的趣味性。
小白避坑提示：① 修改时不要删除template、script、style这些标签，只修改标签里面的文字内容，否则会导致页面报错；② 保存文件后，如果浏览器没有自动刷新，检查一下终端是否正常运行（终端关闭会导致项目停止），或者手动刷新浏览器即可。
四、第2天学习总结
今天的1.5小时过得非常充实，从创建第一个Vue项目，到熟悉项目目录结构，再到修改页面内容，每一步都有明确的目标和实操效果，彻底打破了我对“前端开发”的陌生感，也更加坚定了继续学习的信心。
重点回顾：今天我们完成了3件核心事情——用Vue CLI创建了第一个Vue项目，熟悉了项目的目录结构（重点记住src核心目录），修改了页面内容并感受了Vue的实时更新特性。虽然没有学习复杂的语法，但通过实操，我们已经初步了解了Vue项目的开发流程，知道了如何创建项目、如何修改页面，这都是后续学习的基础。
今天的小收获：学会了3个核心命令（vue create、cd、npm run dev），摸清了Vue项目的“骨架”，还成功修改了自己的第一个Vue页面，成就感满满～ 遇到的小问题：一开始忘记进入项目目录就执行启动命令，导致报错，后来重新输入cd vue-demo进入目录，就顺利解决了，也提醒各位小白，一定要按照步骤来，不要着急。
明天的任务是学习Vue的模板语法（数据绑定），开始接触Vue的核心语法，期待明天的学习，继续解锁Vue新技能！也希望这篇博客能帮助到和我一样的零基础小伙伴，跟着步骤一步步来，我们都能慢慢学会Vue，每天进步一点点，终会有收获✨
