react-multi-page-app是一個基於react和webpack的多頁面應用架構,通過編譯生成對應目錄結構清晰的靜態頁面,實現多頁面便捷開發維護。1.3.0 版本對項目整體做了一個全面的升級,添加修改的以下幾個方面:
- 增加項目創建命令rppx-cli
- 創建Demo展示頁面
- 完善修改REAMDME(中文/英文)
- 增加了redux的使用
- 優化目錄結構
- 優化整體代碼
安裝及使用
全局安裝rppx-cli命令並創建自己的react多頁項目
安裝rppx-cli
$ npm install rppx-cli -g
創建react多頁項目
$ rppx init my-react
安裝依賴
$ npm install
開發環境
$ npm run dev
編譯打包
$ npm run build
運行
$ npm start
自動打開瀏覽器瀏覽頁面 開發 http://localhost:3100 生產 http://localhost:3118
創建新頁面
-
- 在src下創建一個文件目錄
-
- 在新創建的文件目錄下添加
index.js(必須,因為是webpack打包入口文件)
- 在新創建的文件目錄下添加
-
- 在新創建文件夾下添加
pageinfo.json(非必須) 供html插件使用
- 在新創建文件夾下添加
-
npm run dev開發
|-- src
|-- index/
|-- page2/
|-- index.js
|-- pageinfo.json
目錄結構調整
v1.3.0 對整個文件結構做了優化
- 將將頁面文件放在
src下的pages里統一管理 - 增加了
store文件夾放redux相關文件。 - 對整體文件命名以及結構做了大幅度調整
Demo頁面
http://www.h5cool.com/react-multi-page-app/demo/
- home頁為一個簡單預覽頁
- todo頁是一個基於react-redux的todolist頁面
- 整頁排版使用bulma.css
完整代碼參考項目react-multi-page-app
