0-1 开发环境与如何运行 demo
配套 Demo
目标:5 分钟内,你能打开一个网页 demo、看到效果、并打开「调试台」观察输出。这是后面所有章节的前提。
1. 你需要装的东西
| 工具 | 干嘛的 | 现在要装吗 |
|---|---|---|
| Chrome / Edge 浏览器 | 运行和调试网页 | ✅ 必装(系统一般自带 Edge) |
| VS Code | 写代码的编辑器 | ✅ 推荐 |
| Node.js | 第 2 部分才用到(跑 Vite 工程) | 暂时不用,到第 2 部分再装 |
后端类比:浏览器 ≈ 你的「运行时 + 调试器」;VS Code ≈ IDE;Node.js ≈ 第 2 部分才需要的「构建/运行环境」。
VS Code 建议装一个插件:Vue - Official(搜这个名字),写 .vue 文件会有高亮和提示。
2. 网页是怎么跑起来的
一个网页 = 三种文件配合:
- HTML:结构(有哪些内容)——像后端的「数据模型/骨架」。
- CSS:样式(长什么样)——颜色、大小、布局。
- JavaScript(JS):行为(能交互)——点击、请求数据、改界面。
浏览器读到 HTML,就开始渲染;遇到 CSS 就上色排版;遇到 JS 就执行逻辑。没有「main 函数」,浏览器从上到下解析,JS 里再去注册「用户点了按钮就做什么」这类事件。
3. 运行你的第一个 demo
本章 demo 在同目录 demo/0-1-hello.html。
运行方式:在文件管理器里找到它,双击,用浏览器打开。
你会看到一个页面,上面有一个按钮和一段文字。点按钮,文字会变化,页面还会显示当前时间。
这个 demo 没有用任何框架,纯 HTML+CSS+JS,目的是让你先建立「网页能动起来」的直觉。
4. 打开调试台(F12)——前端的「日志 + 断点」
按 F12(或右键 → 检查),弹出开发者工具。后端同学最该关注这几个面板:
| 面板 | 作用 | 后端类比 |
|---|---|---|
| Console(控制台) | 看 console.log 输出、报错 | 看日志 / System.out.println |
| Elements(元素) | 看/改当前页面的 HTML 结构和样式 | 看运行时的对象状态 |
| Network(网络) | 看所有发出去的 HTTP 请求和响应 | 抓包 / 看接口调用 |
| Sources(源代码) | 打断点调试 JS | IDE 断点调试 |
现在就试:在 0-1-hello.html 页面按 F12,切到 Console,你会看到 demo 里 console.log 打的几行字。
小技巧:
console.log(变量)是前端最常用的「调试大法」,等价于你后端到处打日志。
5. 看懂这个 demo 的代码
打开 demo/0-1-hello.html,代码里有详细注释。重点理解三段:
<style>里是 CSS:控制样子。<body>里是 HTML:页面结构,有个<button>和一个<p id="msg">。<script>里是 JS:给按钮绑定点击事件,点了就改<p>里的文字。
注意这种「老式」写法:手动拿到元素(document.getElementById)再手动改它。这正是 Vue 要帮我们消灭的繁琐——记住它有多麻烦,等学到 Vue 你会很爽。
动手练习
- 双击打开 demo,点按钮,看文字变化。
- 按 F12 看 Console 输出。
- 用 VS Code 打开
0-1-hello.html,把按钮文字点我改成你的名字,保存,刷新浏览器,看变化。 - 在 JS 的点击函数里加一行
console.log('我点了按钮'),刷新后点按钮,去 Console 看输出。
小结
- 网页 = HTML(结构)+ CSS(样式)+ JS(行为)。
- 双击
.html即可运行;F12 是你的调试生命线。 - 老式写法靠「手动取元素 + 手动改」,记住这个痛点。
- 下一章补 CSS,再下一章补现代 JS,然后正式进入 Vue。
➡️ 下一章:0-2 CSS 必备:盒模型与 Flex 布局