16、构建单页应用：从骨架到组件化实践

构建单页应用：从骨架到组件化实践

1. 构建单页应用骨架

将 Picshare 应用转换为单页应用（SPA），最终要实现展示公共照片流、个人用户照片流和账户页面的功能。首先要搭建 SPA 的基础架构，使用 elm/url 包将当前 URL 转换为路由，借助 Browser 模块的新功能获取当前 URL，并使用 Elm 架构存储页面状态，最后根据当前页面状态显示不同内容。

1.1 路由所有 URL

1. 准备基础应用 ：
   • 创建一个名为 picshare-spa 的新目录，并将代码下载中的 code/single-page-applications/picshare 目录内容复制到该目录。
   • 在 picshare-spa 目录中运行以下命令安装依赖并启动开发服务器：

npm install
npm start

- 最后一个命令会在端口 3000 启动开发服务器，并在浏览器中打开一个新标签页，你会看到 “Single Page Applications” 文本。骨架应用位于 `src/Main.elm`，可在编辑器中查看。

2. 安装 elm/url 包 ：在 picshare-spa 目录