外观
前端工程开发
前端工具不需要全部学习。一个常见组合是：Node.js 运行工具链，fnm 管版本，Vite 构建，TypeScript 检查类型，再从 Vue、React、Svelte 中选择一个框架。
Node.js
Node.js 负责运行构建工具、测试和服务端 JavaScript。项目应在 package.json 的 engines、.node-version 或版本管理器配置中声明版本，并提交包管理器锁文件。
bash
node --version
npm ci
npm run dev
npm run buildCI 使用 npm ci 等严格按锁文件安装的命令。不要同时提交多个包管理器锁文件，也不要提交 node_modules/。
fnm 与 nvm
两者都用于安装和切换 Node.js 版本，通常选择一个即可。fnm 跨平台且启动快；nvm 在类 Unix 环境中历史更久。进入项目后确认 node --version 与项目声明一致，再安装依赖。
Vite
Vite 提供开发服务器和生产构建：
bash
npm create vite@latest
npm run dev
npm run build
npm run preview只有特定前缀的环境变量会暴露给浏览器；任何进入前端 Bundle 的值都不能当作秘密。preview 用于本地检查产物，不等同于生产服务器。
TypeScript
TypeScript 在构建前发现接口和状态错误。新项目开启严格模式，外部输入先验证再缩窄类型；any 会把问题推迟到运行时，只应在明确边界临时使用。
类型检查、Lint、测试和构建是不同验证层，CI 中都应有明确命令。共享 API 类型时仍需考虑运行时 Schema，因为 TypeScript 类型不会随网络请求存在。
Tailwind CSS
Tailwind 用 utility class 组合样式，适合快速建立一致间距、颜色和响应式规则。重复模式应抽成组件而不是过早创建大量自定义类；动态拼接类名可能影响构建扫描，写法以当前版本文档为准。
Vue、React 与 Svelte
| 工具 | 适合的起点 |
|---|---|
| Vue | 希望模板、响应式状态和官方配套较完整 |
| React | 团队已有 React 生态或需要广泛组件选择 |
| Svelte | 偏好编译期模型和较轻的组件语法 |
三者都能完成大多数研究工具界面。选择团队已有经验和依赖生态，不要在同一应用中混用多个主框架。核心概念都是组件、属性、状态、事件、路由、数据请求和可访问性。
一套可维护的前端结构
按功能组织页面、组件和 API 层；网络请求有加载、空状态、错误和取消；表单在客户端给出反馈，但服务端仍重新验证。大数据表格使用分页或虚拟化，模型推理不要阻塞浏览器主线程。
发布前运行类型检查、测试和正式构建，并在真实窄屏、慢网和键盘操作下检查。Lighthouse 分数是线索，用户能否完成任务才是目标。