Lecture01-课程导览、一次性环境搭建、Vibe Coding 总览

管理员
2026-10-17
前端-基础语法
61
0
文章目录

    [toc]

    单词词性音标含义
    Node.jsn./nəʊd dʒeɪ es/基于 Chrome V8 引擎的 JavaScript 运行环境，让 JS 脱离浏览器在电脑上运行，本节用它验证环境是否装好
    npmn./ˌen piː ˈem/Node.js 自带的包管理工具，负责安装第三方库、管理项目依赖
    Viten./viːt/前端构建与开发工具，本节用 npm create vite 一键创建 Vue + TS 项目
    Vuen./vjuː/主流前端框架，用数据驱动页面，是后续章节的主体
    TypeScriptn./ˈtaɪp skrɪpt/JavaScript 的超集，带类型系统，本节创建的模板就是 vue-ts
    ESLintn./ˈiː es lɪnt/代码规范检查工具，在 VS Code 里实时提示代码风格问题

    Lecture01-课程导览、一次性环境搭建、Vibe Coding 总览

    1、本节讲什么

    装好后面所有章节都要用的工具（一次搞定，全书不再重复），熟悉 VS Code 的常用快捷键，并理解整套课的学习方式——"描述 → 生成 → 验证"黄金三角。

    2、概念速览

    什么是前端开发：一个网页 = HTML（骨架）+ CSS（外观）+ JS（行为）。后端管数据，前端管页面长什么样、怎么交互。

    什么是 Vibe Coding：不手写每一行，而是用自然语言描述需求，让 AI 生成、你来验证。你的价值在"说得清、看得懂、验得了"。

    正确 vs 误区：AI 是"帮你写的工具"，不是"替你负责"——出问题你还是得看懂、会改。

    3、先看效果

    环境装好后，在终端跑一句 node -v 能看到版本号；用 Vite 建的项目能在浏览器打开一个页面：

    Hello Vite + Vue + TypeScript!
[count is 0]  [+1]  [-1]

    4、照着做

    ① 装 Node.js（自带 npm）

    1. 老师发给你安装程序： node-v22.17.1-x64.msi 一路默认安装，注意放在非中文、无空格目录。
    2. 打开终端，验证：
    node -v      # 应显示 v22.17.1
npm -v       # 应显示 10 或更高

    有版本号输出就是装好了。以后全书的 node / npm 命令都依赖它，不再重复。

    ② 装编辑器 VS Code

    1. 到 https://code.visualstudio.com 下载安装。
    2. 装两个插件：Vue - Official（写 Vue 高亮）和 ESLint（代码规范提示）。

    ③ 用 Vite 创建第一个 Vue + TS 项目

    npm create vite@latest my-first-app -- --template vue-ts
cd my-first-app
npm install
npm run dev

    用浏览器打开终端显示的地址（通常是 http://localhost:5173），看到"先看效果"的页面。

    ④ 认识三个窗口：浏览器（看页面效果）、终端（跑命令、看报错）、VS Code（写代码）。

    VS Code 常用快捷键（先记住这 15 个，够用很久）

    快捷键作用
    Ctrl + S保存文件（写代码第一高频动作）
    Ctrl + Z / Ctrl + Shift + Z撤销 / 重做
    Ctrl + X剪切当前整行
    Ctrl + D选中下一个相同的词（批量改同名变量）
    Ctrl + F / Ctrl + H查找 / 替换
    Ctrl + P快速打开文件（输文件名跳转）
    Ctrl + Shift + P命令面板（执行各种命令）
    Ctrl + 空格打开 / 关闭终端
    Ctrl + /注释 / 取消注释当前行
    Shift + Alt + ↑ / ↓向上 / 向下复制当前行
    Alt + ↑ / ↓上 / 下移动当前行
    Tab / Shift + Tab缩进 / 取消缩进
    Ctrl + B显示 / 隐藏侧边栏
    F12跳转到定义（看变量/函数从哪来，TS 尤其好用）
    按住 Alt + 鼠标点击多处多光标同时编辑

    刚开始不要求全背，先熟记：Ctrl+S、Ctrl+D、Ctrl+/、Ctrl+空格、Ctrl+P 这五个，其他用到再查。

    5、常见疑问

    • Q：终端里 npm install 报错装不上？ A：多数是国际网络问题，换镜像源一次解决：
    npm config set registry https://registry.npmmirror.com

    然后重新 npm install。

    • Q：我不小心把页面改坏了，怎么看原来的？ A：VS Code 里 Ctrl + Z 撤销；删了文件就重新 npm create vite 建一个。
    • Q：npm run dev 之后页面改了不刷新？ A：Vite 自带热更新，保存代码后浏览器自动刷新。

    6、规范要点

    • 项目名用小写+短横线（如 my-first-app），别用中文和空格。
    • 命令报错先读最后一行，通常是"缺什么装什么、路径不对改路径"。
    • 从现在起，每条命令、每个操作都想清楚"这一步在做什么"——这也是后面指挥 AI 的基本功。

    7、本节验证

    • 能装好 Node.js，并用 node -v / npm -v 验证版本号 ✅
    • 能在 VS Code 里装好 Vue - Official 和 ESLint 两个插件 ✅
    • 能用 npm create vite@latest my-first-app -- --template vue-ts 建出项目，并 npm run dev 打开页面 ✅
    • 知道 npm install 装不上时换镜像源 npmmirror 解决 ✅
    • 认识浏览器 / 终端 / VS Code 三个窗口各自的分工 ✅
    end