教程② 用 Acode 写前端项目

上一篇跑通了最小页面，这一篇我们用 Acode 完成一个带样式和交互的完整前端项目，并学会用 Node.js 在手机上启动本地服务器。

规划项目结构

标准前端项目包含三个文件：index.html 负责结构，style.css 负责样式，app.js 负责交互。在 Acode 中新建项目 my-site 并依次创建这三个文件，侧边栏的文件树支持长按重命名、复制和删除。

编写样式与脚本

在 index.html 中引入 style.css 和 app.js。样式文件定义配色与卡片布局，脚本文件里写一个按钮交互：点击后改变文字内容并记录点击次数。Acode 对 CSS 和 JavaScript 都有语法高亮，写错括号时行号附近会立即出现错误标记。

实时预览与设备模拟

点击预览图标，页面会在内置浏览器中渲染。预览工具栏里的设备模拟可以切换到手机、平板等不同尺寸，检查响应式布局是否正常，相当于把浏览器开发者工具装进了口袋。

用 Node 启动本地服务器

纯静态页面可以直接预览，但现代前端依赖模块加载或接口请求，这时需要本地服务器。打开终端，输入以下命令：

cd my-site
npm init -y
npm install express
node server.js

提前在 server.js 中写好静态资源托管代码，启动后访问 http://localhost:3000，就能以服务器模式访问你的项目。

让手机和电脑同网调试

确保手机与电脑连接同一 Wi-Fi，在终端查看手机局域网 IP，用电脑访问 http://手机IP:3000 即可。

代码提示与常见错误

Acode 内置基础代码补全，想要更智能的补全可以安装 LSP 插件接入 TypeScript 或 CSS 语言服务器，但手机内存有限，大型语言服务器可能消耗较多资源。预览空白多半是标签未闭合或引号不匹配，检查控制台输出可以快速定位。