需集成前端框架实现 SPA：一、Vue.js 组件化 +Vue Router；二、React+Create React App+react-router-dom；三、Svelte Kit 文件系统路由；四、原生 JS+History API；五、Next.js 静态导出。
如果将 PSD 设计稿转换为 HTML5 代码，并希望最终产物具备单页应用（SPA）的交互特性，则需在基础静态结构之上集成前端框架。以下是实现该目标的多种方法：
一、使用 Vue.js 进行组件化重构
该方法通过将 PSD 切图后的 HTML 结构封装为 Vue 单文件组件，利用 Vue Router 实现路由切换，避免页面刷新，从而达成单页应用效果。
1、将 PSD 导出的 HTML 页面拆分为 Header、Main、Footer 等独立区块，保存为。vue 文件。
2、在 main.js 中引入 Vue Router，并定义路径映射，例如{path: ‘/’, component: Home}。
立即学习 “ 前端免费学习笔记（深入）”；
3、将原始 HTML 中的导航链接替换为
4、在 index.html中保留单一 #app 挂载点，所有视图内容由
5、运行 npm run serve 启动开发服务器，验证点击导航时 URL 变化但无整页刷新。
二、基于 React 与 Create React App 构建
此方案借助 React 的声明式 UI 和客户端路由能力，在静态 HTML 基础上注入状态管理与视图切换逻辑，形成完整 SPA 架构。
1、使用 create-react-app 初始化项目，删除 src 目录下默认文件，保留 index.js 和 App.js。
2、将 PSD 切图所得的 HTML 结构复制进 App.js 的 return 语句内，用 JSX 语法重写 class 为 className。
3、安装 react-router-dom，配置 BrowserRouter 与 Routes 组件，在 App.js 中包裹 Route 定义各页面路径。
4、将原 HTML 中跳转链接改为 关于，确保导航不触发 HTTP 请求。
5、在 public/index.html 的
内仅保留
，其余静态结构移入组件。
三、采用 Svelte Kit 服务端路由整合
该方法利用 Svelte Kit 的文件系统路由机制，将 PSD 页面按语义组织为 +page.svelte 文件，自动启用客户端导航与预加载。
1、执行 npm create svelte@latest 创建新项目，选择“Skeleton project”并启用 TypeScript 支持。
2、在 src/routes 目录下新建 index.svelte，粘贴首页 HTML 结构，将内联样式提取至
3、为每个 PSD 子页面（如产品、联系）分别建立 product/+page.svelte、contact/+page.svelte。
4、将原 HTML 中的 href 属性统一改为 svelte:link 或 $lib/components/Nav.svelte 封装的导航组件。
5、运行 npm run dev，访问 localhost:5173，检查点击菜单时地址栏更新且无闪烁。
四、纯原生 JavaScript + History API 模拟
不依赖框架的前提下，通过监听 popstate 事件与 replaceState/pushState 操作 DOM，使静态 HTML 具备 SPA 行为。
1、将 PSD 切图生成的多个 HTML 文件（index.html、about.html、service.html）内容全部内联至单个 index.html 的不同 data-section 中。
2、编写 script 标签内 JS 逻辑，初始化时读取 window.location.pathname，显示对应 section 并隐藏其余。
3、为所有导航 a 标签添加 event.preventDefault()，调用 history.pushState({page: ‘about’}, ”, ‘/about’)。
4、绑定 window.addEventListener(‘popstate’, handler)，在 handler 中根据 state.page 切换可见 section。
5、设置 404 响应头或使用 server config 重写所有路径至 index.html，确保直接访问 /about 可正常加载。
五、Next.js 静态导出适配法
利用 Next.js 的 App Router 与静态生成能力，将 PSD 页面作为独立路由处理，在构建阶段输出纯 HTML+JS 资源包。
1、运行 npx create-next-app@latest，选择默认配置，进入项目后删除 app/page.tsx 默认内容。
2、在 app 目录下创建 layout.tsx，放入全局 header 与 footer HTML 结构，使用 {children} 占位主内容。
3、将 PSD 首页内容存为 app/page.tsx，其他页面分别建为 app/about/page.tsx、app/contact/page.tsx。
4、在 tsconfig.json 中启用 ”jsx”: “preserve”，确保 JSX 语法兼容原有 HTML 结构。
5、执行 npm run build && npm run export，输出目录 out 中即为可部署的单页应用静态文件集。
