1. 从零搭前端环境为什么我建议 VS Code 配 TaoToken 一起上刚接触前端的同学最容易卡在第一步编辑器装好了插件也点了安装但写出来的 HTML 页面在浏览器里就是不动改一行代码要手动刷新十几次。更麻烦的是现在写页面多少要接一点接口数据新手往往还没搞懂fetch怎么发请求就先被 Key 管理、Base URL、模型 ID 这些概念绕晕。这篇就解决两件事一是用 Visual Studio Code下面统一叫 VS Code把 HTML 开发环境跑通二是把 TaoToken 作为统一的 API 通道接进来让你在写第一个页面的同时就能顺手调通一次接口请求。适合谁适合刚学 HTML、还没配过任何开发环境、看到「终端」「配置文件」就有点发怵的新手。Windows 和 macOS 的操作我都会写清楚你照着做就行。核心检索词先摆出来VS Code 前端环境搭建、HTML 页面热更新、TaoToken API 通道配置。这三个词贯穿全文你搜到的其他教程如果只讲装插件不讲接口那这篇正好补上。我试过最省事的路径是这样的装 VS Code → 装 Live Server 和 HTML 相关插件 → 新建index.html→ 写一个能显示内容的页面 → 配好 TaoToken 的 Key 和 Base URL → 在页面里发一次请求验证通道。整个过程不需要你懂 Node.js也不需要命令行基础复制粘贴就能完成。先说清楚 TaoToken 在这里的角色。它提供的是一个统一的 API 入口你拿到一个 Key 之后可以通过https://taotoken.net/api这个地址去调用模型能力。对前端新手来说好处是你不用分别去记不同厂商的地址和参数格式一个 Key、一个 Base URL 就能跑通。官网入口在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 注册和拿 Key 的步骤后面会讲。环境搭建这件事很多人觉得「装个软件而已」但真正踩坑的地方在于插件装了没生效、Live Server 点了没反应、页面改了不刷新、请求发出去报 401。这些问题的根因往往不是软件坏了而是配置没对齐。所以这篇不会只给你步骤还会把每一步「怎么验证成功」写出来你对照着看就知道自己走到哪了。2. 装 VS Code 与 Live Server把 HTML 预览跑起来2.1 下载与安装 VS Code官网地址是https://code.visualstudio.com/打开后页面会自动识别你的系统给出对应的下载按钮。Windows 用户下载.exe安装包macOS 用户下载.dmg或者 Apple Silicon 版本的压缩包。安装过程一路下一步即可Windows 上建议勾选「添加到 PATH」这样以后在终端里输入code就能直接打开编辑器。macOS 用户第一次打开可能会提示「无法验证开发者」去「系统设置 → 隐私与安全性」里点「仍要打开」就行。安装完成后打开 VS Code你会看到一个欢迎页左边是活动栏中间是编辑区底部是状态栏。先不用管太多我们直接进入插件安装。2.2 安装 Live Server 与 HTML 相关插件点左侧活动栏的扩展图标四个方块那个或者按CtrlShiftXmacOS 是CmdShiftX打开扩展面板。在搜索框里依次安装下面几个插件插件名作用搜索关键词Live Server本地起服务保存即刷新Live ServerHTML CSS SupportHTML 里补全 CSS 类名HTML CSS SupportAuto Rename Tag改开标签自动改闭标签Auto Rename TagPrettier代码格式化PrettierLive Server 是核心它会在你保存文件时自动刷新浏览器省掉手动刷新的动作。安装完成后不需要重启但建议把 VS Code 关掉重开一次确保插件加载完整。2.3 新建 index.html 并写第一个页面在桌面或者你习惯的目录下新建一个文件夹比如叫my-first-page。回到 VS Code点「文件 → 打开文件夹」选中这个文件夹。然后在左侧资源管理器里右键新建文件命名为index.html。在index.html里输入一个英文感叹号!然后按 Tab 或回车VS Code 会自动生成 HTML5 的骨架。把title改成「我的第一个页面」在body里写一行文字!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body h1这是我用 VS Code 写的第一个 HTML 页面/h1 p下面这个按钮会调用一次接口验证 TaoToken 通道是否正常。/p button idpingBtn测试接口/button pre idresult/pre script srcapp.js/script /body /html保存文件CtrlS/CmdS。然后在编辑区右键选择「Open with Live Server」浏览器会自动打开http://127.0.0.1:5500/index.html。如果你看到页面标题和文字说明 Live Server 已经生效。这时候你回到 VS Code 改一下h1里的文字保存浏览器会自动刷新这就是热更新。2.4 验证插件是否真的生效三个验证动作你按顺序做一遍第一插件生效验证。改一行文字保存浏览器自动刷新说明 Live Server 在工作。如果没反应看 VS Code 右下角状态栏有没有「Port: 5500」的字样没有的话说明服务没起来重新右键「Open with Live Server」。第二页面热更新验证。把h1的文字改成别的保存浏览器标题栏和内容同步变化。如果只变了一部分检查是不是改错了文件或者浏览器缓存没清。第三接口调用验证。这一步需要先配好 TaoToken放在下一节讲。配好之后点「测试接口」按钮页面下方会显示返回结果。3. 配置 TaoToken 统一 Key 与 API 通道3.1 拿到 Key 和 Base URL打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 注册登录后进入控制台。在 API Keys 页面创建一个新的 Key复制出来。这个 Key 只显示一次建议先存到记事本里。Base URL 统一用https://taotoken.net/api注意这里不加任何多余路径。如果你用的是 Claude Code 或者 Cline 这类工具配置方式略有不同但核心三件套是一样的Base URL、Key、Model ID。Model ID 在控制台的模型列表里能看到选一个你需要的即可。3.2 在 VS Code 里配置 settings.jsonVS Code 的用户配置可以通过settings.json管理。按CtrlShiftPmacOS 是CmdShiftP打开命令面板输入「Open User Settings (JSON)」回车。在打开的settings.json里加入下面这段骨架{ editor.formatOnSave: true, editor.tabSize: 2, files.autoSave: afterDelay, liveServer.settings.port: 5500, liveServer.settings.donotShowInfoMsg: true, html.format.wrapLineLength: 120, taotoken.baseUrl: https://taotoken.net/api, taotoken.apiKey: 把你的Key粘贴到这里, taotoken.modelId: 你的模型ID }注意taotoken.*这几项不是 VS Code 原生支持的配置项如果你装了对应的 TaoToken 插件它们会被读取如果没有插件这几项只是占位不影响编辑器本身运行。真正发请求的时候Key 和 Base URL 是写在你的前端代码里的。3.3 在前端代码里发一次请求在index.html同目录下新建app.js写入下面的代码const API_BASE https://taotoken.net/api; const API_KEY 把你的Key粘贴到这里; const MODEL_ID 你的模型ID; document.getElementById(pingBtn).addEventListener(click, async () { const resultEl document.getElementById(result); resultEl.textContent 请求中...; try { const res await fetch(${API_BASE}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${API_KEY} }, body: JSON.stringify({ model: MODEL_ID, messages: [ { role: user, content: 用一句话打个招呼 } ] }) }); if (!res.ok) { const errText await res.text(); resultEl.textContent 请求失败${res.status}\n${errText}; return; } const data await res.json(); const reply data.choices?.[0]?.message?.content ?? 返回结构里没有 choices; resultEl.textContent 返回内容\n${reply}; } catch (err) { resultEl.textContent 网络错误${err.message}; } });保存后回到浏览器点「测试接口」按钮。如果一切正常页面下方会显示模型返回的一句话。这一步同时验证了三件事Live Server 在跑、页面能发请求、TaoToken 通道正常。3.4 关于 Key 安全的一点提醒前端代码里的 Key 是暴露在浏览器里的任何人打开开发者工具都能看到。这只适合本地学习和验证通道不要直接部署到公网。正式项目里请求应该由你自己的后端转发Key 存在服务端。这一点新手容易忽略先记住就行。4. 验证请求与成功结果三步确认环境真的通了4.1 第一步确认 Live Server 端口与页面加载打开浏览器开发者工具F12切到 Network 面板刷新页面。你应该能看到index.html、app.js两个请求状态码都是 200。如果app.js是 404说明文件名或路径写错了检查是不是放在了同目录下。地址栏应该是http://127.0.0.1:5500/index.html。如果你看到的是file:///...开头说明你是直接双击打开的 HTML 文件没有走 Live Server这样热更新不会生效接口请求也可能因为跨域被拦。正确做法是右键「Open with Live Server」。4.2 第二步确认热更新生效保持浏览器打开回到 VS Code 把h1的文字改一下保存。浏览器应该在一秒内自动刷新显示新文字。如果没有刷新检查 Live Server 状态栏是否还在运行或者看 VS Code 右下角有没有报错提示。热更新的原理是 Live Server 在本地起了一个 WebSocket文件保存时通知浏览器刷新。所以它只对通过127.0.0.1:5500访问的页面生效直接打开本地文件是不行的。4.3 第三步确认接口返回正常点「测试接口」按钮观察页面下方的pre区域。成功的情况下你会看到类似这样的返回返回内容 你好很高兴见到你有什么可以帮你的吗如果返回的是请求失败401说明 Key 不对或者没带上。检查app.js里的API_KEY是不是完整复制了有没有多余空格。如果返回请求失败404检查 Base URL 是不是写成了https://taotoken.net/api/v1/chat/completions之外的其他路径。如果返回网络错误Failed to fetch多半是跨域或者网络问题先确认 Base URL 拼写正确。三个验证动作做完你的前端环境就算真正跑通了。不是「装好了软件」这种表面跑通而是「页面能刷新、请求能返回」的实质跑通。5. 常见报错排查401、local proxy failed、reading choices5.1 401 Unauthorized这是最常见的报错。原因通常有三个Key 没填、Key 填错、Key 前面多了Bearer又重复加了一次。检查app.js里的Authorization头正确写法是Bearer ${API_KEY}其中API_KEY只包含 Key 本身不要带前缀。还有一种情况是 Key 被删除了或者过期了。回控制台重新创建一个替换掉代码里的旧 Key。5.2 local proxy failed这个报错一般出现在你用了某些代理工具或者公司网络限制的情况下。先确认你的网络能正常访问https://taotoken.net/api可以在浏览器里直接打开这个地址看有没有返回。如果浏览器能打开但代码里报错检查是不是系统代理设置影响了fetch。另外如果你在 VS Code 里装了某些会改网络配置的插件也可能导致这个问题。临时禁用可疑插件重启 VS Code 再试。5.3 reading choices报错信息类似Cannot read properties of undefined (reading choices)说明返回的 JSON 结构里没有choices字段。原因通常是请求体格式不对比如model字段写错了或者messages不是数组。检查你的请求体{ model: 正确的模型ID, messages: [ { role: user, content: 你好 } ] }model必须是控制台里真实存在的 ID不能随便写。messages必须是数组每个元素有role和content。5.4 OAuth 相关报错如果你用的是 Claude Code 或者 Codex 这类工具可能会遇到 OAuth 报错。这类工具通常需要你在配置文件里写清楚 Base URL、Key、Model ID 三件套。以 Claude Code 为例配置文件里需要指定ANTHROPIC_BASE_URL为https://taotoken.net/apiANTHROPIC_API_KEY为你的 Key模型 ID 按控制台里的写。三件套缺一不可少一个就会报 OAuth 或认证失败。5.5 页面改了不刷新先确认你是通过 Live Server 打开的页面地址是127.0.0.1:5500开头。然后确认文件保存了VS Code 标签页上的圆点消失才算保存成功。如果还不行看 Live Server 的输出面板有没有报错重启一下 Live Server。5.6 插件装了没反应VS Code 插件安装后一般立即生效但有些插件需要重载窗口。按CtrlShiftP输入「Reload Window」回车重载后再试。如果还是不行卸载重装一次。6. 把环境用起来下一步可以做什么环境跑通之后你可以开始做更实际的事情。比如把app.js里的请求改成一个简单的聊天界面输入框加按钮把用户输入发给模型把返回显示在页面上。这样你就有了一个最小可用的 AI 对话页面全部代码不超过一百行。再进一步你可以用 TaoToken 的 Coding Plan 来辅助写代码。在 VS Code 里装 Cline 或者 Continue 这类插件把 Base URL 填https://taotoken.net/apiKey 填你的 KeyModel ID 选一个适合编码的就能在编辑器里直接让模型帮你补全代码、解释报错。这对新手特别有用遇到看不懂的报错选中代码问一下就行。如果你更习惯命令行Claude Code 也是一个选择。配置好三件套之后在终端里就能让模型帮你改文件、跑命令。不过对刚接触前端的人来说先把 VS Code 加 Live Server 这套跑熟再上命令行工具会更顺。最后提醒一句Key 不要提交到 Git不要发到公开仓库。本地学习用没问题一旦要部署记得把请求挪到后端。环境搭建这件事跑通一次之后就是肌肉记忆后面换电脑、换系统十分钟就能重来一遍。
搭建初始前端操作环境：用 VS Code 配 TaoToken 写第一个 HTML 页面
1. 从零搭前端环境为什么我建议 VS Code 配 TaoToken 一起上刚接触前端的同学最容易卡在第一步编辑器装好了插件也点了安装但写出来的 HTML 页面在浏览器里就是不动改一行代码要手动刷新十几次。更麻烦的是现在写页面多少要接一点接口数据新手往往还没搞懂fetch怎么发请求就先被 Key 管理、Base URL、模型 ID 这些概念绕晕。这篇就解决两件事一是用 Visual Studio Code下面统一叫 VS Code把 HTML 开发环境跑通二是把 TaoToken 作为统一的 API 通道接进来让你在写第一个页面的同时就能顺手调通一次接口请求。适合谁适合刚学 HTML、还没配过任何开发环境、看到「终端」「配置文件」就有点发怵的新手。Windows 和 macOS 的操作我都会写清楚你照着做就行。核心检索词先摆出来VS Code 前端环境搭建、HTML 页面热更新、TaoToken API 通道配置。这三个词贯穿全文你搜到的其他教程如果只讲装插件不讲接口那这篇正好补上。我试过最省事的路径是这样的装 VS Code → 装 Live Server 和 HTML 相关插件 → 新建index.html→ 写一个能显示内容的页面 → 配好 TaoToken 的 Key 和 Base URL → 在页面里发一次请求验证通道。整个过程不需要你懂 Node.js也不需要命令行基础复制粘贴就能完成。先说清楚 TaoToken 在这里的角色。它提供的是一个统一的 API 入口你拿到一个 Key 之后可以通过https://taotoken.net/api这个地址去调用模型能力。对前端新手来说好处是你不用分别去记不同厂商的地址和参数格式一个 Key、一个 Base URL 就能跑通。官网入口在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 注册和拿 Key 的步骤后面会讲。环境搭建这件事很多人觉得「装个软件而已」但真正踩坑的地方在于插件装了没生效、Live Server 点了没反应、页面改了不刷新、请求发出去报 401。这些问题的根因往往不是软件坏了而是配置没对齐。所以这篇不会只给你步骤还会把每一步「怎么验证成功」写出来你对照着看就知道自己走到哪了。2. 装 VS Code 与 Live Server把 HTML 预览跑起来2.1 下载与安装 VS Code官网地址是https://code.visualstudio.com/打开后页面会自动识别你的系统给出对应的下载按钮。Windows 用户下载.exe安装包macOS 用户下载.dmg或者 Apple Silicon 版本的压缩包。安装过程一路下一步即可Windows 上建议勾选「添加到 PATH」这样以后在终端里输入code就能直接打开编辑器。macOS 用户第一次打开可能会提示「无法验证开发者」去「系统设置 → 隐私与安全性」里点「仍要打开」就行。安装完成后打开 VS Code你会看到一个欢迎页左边是活动栏中间是编辑区底部是状态栏。先不用管太多我们直接进入插件安装。2.2 安装 Live Server 与 HTML 相关插件点左侧活动栏的扩展图标四个方块那个或者按CtrlShiftXmacOS 是CmdShiftX打开扩展面板。在搜索框里依次安装下面几个插件插件名作用搜索关键词Live Server本地起服务保存即刷新Live ServerHTML CSS SupportHTML 里补全 CSS 类名HTML CSS SupportAuto Rename Tag改开标签自动改闭标签Auto Rename TagPrettier代码格式化PrettierLive Server 是核心它会在你保存文件时自动刷新浏览器省掉手动刷新的动作。安装完成后不需要重启但建议把 VS Code 关掉重开一次确保插件加载完整。2.3 新建 index.html 并写第一个页面在桌面或者你习惯的目录下新建一个文件夹比如叫my-first-page。回到 VS Code点「文件 → 打开文件夹」选中这个文件夹。然后在左侧资源管理器里右键新建文件命名为index.html。在index.html里输入一个英文感叹号!然后按 Tab 或回车VS Code 会自动生成 HTML5 的骨架。把title改成「我的第一个页面」在body里写一行文字!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body h1这是我用 VS Code 写的第一个 HTML 页面/h1 p下面这个按钮会调用一次接口验证 TaoToken 通道是否正常。/p button idpingBtn测试接口/button pre idresult/pre script srcapp.js/script /body /html保存文件CtrlS/CmdS。然后在编辑区右键选择「Open with Live Server」浏览器会自动打开http://127.0.0.1:5500/index.html。如果你看到页面标题和文字说明 Live Server 已经生效。这时候你回到 VS Code 改一下h1里的文字保存浏览器会自动刷新这就是热更新。2.4 验证插件是否真的生效三个验证动作你按顺序做一遍第一插件生效验证。改一行文字保存浏览器自动刷新说明 Live Server 在工作。如果没反应看 VS Code 右下角状态栏有没有「Port: 5500」的字样没有的话说明服务没起来重新右键「Open with Live Server」。第二页面热更新验证。把h1的文字改成别的保存浏览器标题栏和内容同步变化。如果只变了一部分检查是不是改错了文件或者浏览器缓存没清。第三接口调用验证。这一步需要先配好 TaoToken放在下一节讲。配好之后点「测试接口」按钮页面下方会显示返回结果。3. 配置 TaoToken 统一 Key 与 API 通道3.1 拿到 Key 和 Base URL打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 注册登录后进入控制台。在 API Keys 页面创建一个新的 Key复制出来。这个 Key 只显示一次建议先存到记事本里。Base URL 统一用https://taotoken.net/api注意这里不加任何多余路径。如果你用的是 Claude Code 或者 Cline 这类工具配置方式略有不同但核心三件套是一样的Base URL、Key、Model ID。Model ID 在控制台的模型列表里能看到选一个你需要的即可。3.2 在 VS Code 里配置 settings.jsonVS Code 的用户配置可以通过settings.json管理。按CtrlShiftPmacOS 是CmdShiftP打开命令面板输入「Open User Settings (JSON)」回车。在打开的settings.json里加入下面这段骨架{ editor.formatOnSave: true, editor.tabSize: 2, files.autoSave: afterDelay, liveServer.settings.port: 5500, liveServer.settings.donotShowInfoMsg: true, html.format.wrapLineLength: 120, taotoken.baseUrl: https://taotoken.net/api, taotoken.apiKey: 把你的Key粘贴到这里, taotoken.modelId: 你的模型ID }注意taotoken.*这几项不是 VS Code 原生支持的配置项如果你装了对应的 TaoToken 插件它们会被读取如果没有插件这几项只是占位不影响编辑器本身运行。真正发请求的时候Key 和 Base URL 是写在你的前端代码里的。3.3 在前端代码里发一次请求在index.html同目录下新建app.js写入下面的代码const API_BASE https://taotoken.net/api; const API_KEY 把你的Key粘贴到这里; const MODEL_ID 你的模型ID; document.getElementById(pingBtn).addEventListener(click, async () { const resultEl document.getElementById(result); resultEl.textContent 请求中...; try { const res await fetch(${API_BASE}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${API_KEY} }, body: JSON.stringify({ model: MODEL_ID, messages: [ { role: user, content: 用一句话打个招呼 } ] }) }); if (!res.ok) { const errText await res.text(); resultEl.textContent 请求失败${res.status}\n${errText}; return; } const data await res.json(); const reply data.choices?.[0]?.message?.content ?? 返回结构里没有 choices; resultEl.textContent 返回内容\n${reply}; } catch (err) { resultEl.textContent 网络错误${err.message}; } });保存后回到浏览器点「测试接口」按钮。如果一切正常页面下方会显示模型返回的一句话。这一步同时验证了三件事Live Server 在跑、页面能发请求、TaoToken 通道正常。3.4 关于 Key 安全的一点提醒前端代码里的 Key 是暴露在浏览器里的任何人打开开发者工具都能看到。这只适合本地学习和验证通道不要直接部署到公网。正式项目里请求应该由你自己的后端转发Key 存在服务端。这一点新手容易忽略先记住就行。4. 验证请求与成功结果三步确认环境真的通了4.1 第一步确认 Live Server 端口与页面加载打开浏览器开发者工具F12切到 Network 面板刷新页面。你应该能看到index.html、app.js两个请求状态码都是 200。如果app.js是 404说明文件名或路径写错了检查是不是放在了同目录下。地址栏应该是http://127.0.0.1:5500/index.html。如果你看到的是file:///...开头说明你是直接双击打开的 HTML 文件没有走 Live Server这样热更新不会生效接口请求也可能因为跨域被拦。正确做法是右键「Open with Live Server」。4.2 第二步确认热更新生效保持浏览器打开回到 VS Code 把h1的文字改一下保存。浏览器应该在一秒内自动刷新显示新文字。如果没有刷新检查 Live Server 状态栏是否还在运行或者看 VS Code 右下角有没有报错提示。热更新的原理是 Live Server 在本地起了一个 WebSocket文件保存时通知浏览器刷新。所以它只对通过127.0.0.1:5500访问的页面生效直接打开本地文件是不行的。4.3 第三步确认接口返回正常点「测试接口」按钮观察页面下方的pre区域。成功的情况下你会看到类似这样的返回返回内容 你好很高兴见到你有什么可以帮你的吗如果返回的是请求失败401说明 Key 不对或者没带上。检查app.js里的API_KEY是不是完整复制了有没有多余空格。如果返回请求失败404检查 Base URL 是不是写成了https://taotoken.net/api/v1/chat/completions之外的其他路径。如果返回网络错误Failed to fetch多半是跨域或者网络问题先确认 Base URL 拼写正确。三个验证动作做完你的前端环境就算真正跑通了。不是「装好了软件」这种表面跑通而是「页面能刷新、请求能返回」的实质跑通。5. 常见报错排查401、local proxy failed、reading choices5.1 401 Unauthorized这是最常见的报错。原因通常有三个Key 没填、Key 填错、Key 前面多了Bearer又重复加了一次。检查app.js里的Authorization头正确写法是Bearer ${API_KEY}其中API_KEY只包含 Key 本身不要带前缀。还有一种情况是 Key 被删除了或者过期了。回控制台重新创建一个替换掉代码里的旧 Key。5.2 local proxy failed这个报错一般出现在你用了某些代理工具或者公司网络限制的情况下。先确认你的网络能正常访问https://taotoken.net/api可以在浏览器里直接打开这个地址看有没有返回。如果浏览器能打开但代码里报错检查是不是系统代理设置影响了fetch。另外如果你在 VS Code 里装了某些会改网络配置的插件也可能导致这个问题。临时禁用可疑插件重启 VS Code 再试。5.3 reading choices报错信息类似Cannot read properties of undefined (reading choices)说明返回的 JSON 结构里没有choices字段。原因通常是请求体格式不对比如model字段写错了或者messages不是数组。检查你的请求体{ model: 正确的模型ID, messages: [ { role: user, content: 你好 } ] }model必须是控制台里真实存在的 ID不能随便写。messages必须是数组每个元素有role和content。5.4 OAuth 相关报错如果你用的是 Claude Code 或者 Codex 这类工具可能会遇到 OAuth 报错。这类工具通常需要你在配置文件里写清楚 Base URL、Key、Model ID 三件套。以 Claude Code 为例配置文件里需要指定ANTHROPIC_BASE_URL为https://taotoken.net/apiANTHROPIC_API_KEY为你的 Key模型 ID 按控制台里的写。三件套缺一不可少一个就会报 OAuth 或认证失败。5.5 页面改了不刷新先确认你是通过 Live Server 打开的页面地址是127.0.0.1:5500开头。然后确认文件保存了VS Code 标签页上的圆点消失才算保存成功。如果还不行看 Live Server 的输出面板有没有报错重启一下 Live Server。5.6 插件装了没反应VS Code 插件安装后一般立即生效但有些插件需要重载窗口。按CtrlShiftP输入「Reload Window」回车重载后再试。如果还是不行卸载重装一次。6. 把环境用起来下一步可以做什么环境跑通之后你可以开始做更实际的事情。比如把app.js里的请求改成一个简单的聊天界面输入框加按钮把用户输入发给模型把返回显示在页面上。这样你就有了一个最小可用的 AI 对话页面全部代码不超过一百行。再进一步你可以用 TaoToken 的 Coding Plan 来辅助写代码。在 VS Code 里装 Cline 或者 Continue 这类插件把 Base URL 填https://taotoken.net/apiKey 填你的 KeyModel ID 选一个适合编码的就能在编辑器里直接让模型帮你补全代码、解释报错。这对新手特别有用遇到看不懂的报错选中代码问一下就行。如果你更习惯命令行Claude Code 也是一个选择。配置好三件套之后在终端里就能让模型帮你改文件、跑命令。不过对刚接触前端的人来说先把 VS Code 加 Live Server 这套跑熟再上命令行工具会更顺。最后提醒一句Key 不要提交到 Git不要发到公开仓库。本地学习用没问题一旦要部署记得把请求挪到后端。环境搭建这件事跑通一次之后就是肌肉记忆后面换电脑、换系统十分钟就能重来一遍。
