React多頁面應用腳手架-v1.3.0

leinov發表於2018-12-10
React

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

建立新頁面

    1. 在src下建立一個檔案目錄
    1. 在新建立的檔案目錄下新增index.js（必須，因為是webpack打包入口檔案）
    1. 在新建立資料夾下新增pageinfo.json（非必須） 供html外掛使用
    1. npm run dev開發
|-- src
    |-- index/
    |-- page2/
        |-- index.js
        |-- pageinfo.json
複製程式碼

目錄結構調整

v1.3.0 對整個檔案結構做了優化

  • 將將頁面檔案放在src下的pages裡統一管理
  • 增加了store資料夾放redux相關檔案。
  • 對整體檔案命名以及結構做了大幅度調整

Demo頁面

www.h5cool.com/react-multi…

  • home頁為一個簡單預覽頁
  • todo頁是一個基於react-redux的todolist頁面
  • 整頁排版使用bulma.css

完整程式碼參考專案react-multi-page-app

相關文章