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

ACb0y 發(fā)布于2019-08-23 13:58 / 962人閱讀

摘要：是一個基于和的多頁面應用架構(gòu)，通過編譯生成對應目錄結(jié)構(gòu)清晰的靜態(tài)頁面實現(xiàn)多頁面便捷開發(fā)維護。對整體文件命名以及結(jié)構(gòu)做了大幅度調(diào)整頁面頁為一個簡單預覽頁頁是一個基于的頁面整頁排版使用完整代碼參考項目

react-multi-page-app是一個基于react和webpack的多頁面應用架構(gòu)，通過編譯生成對應目錄結(jié)構(gòu)清晰的靜態(tài)頁面,實現(xiàn)多頁面便捷開發(fā)維護。1.3.0 版本對項目整體做了一個全面的升級，添加修改的以下幾個方面：

增加項目創(chuàng)建命令rppx-cli

創(chuàng)建Demo展示頁面

完善修改REAMDME（中文/英文）

增加了redux的使用

優(yōu)化目錄結(jié)構(gòu)

優(yōu)化整體代碼

安裝及使用

全局安裝rppx-cli命令并創(chuàng)建自己的react多頁項目

安裝rppx-cli

$ npm install rppx-cli -g

創(chuàng)建react多頁項目

$ rppx init my-react

安裝依賴

$ npm install

開發(fā)環(huán)境

$ npm run dev

編譯打包

$ npm run build

運行

$ npm start

自動打開瀏覽器瀏覽頁面開發(fā) http://localhost:3100 生產(chǎn) http://localhost:3118

創(chuàng)建新頁面

在src下創(chuàng)建一個文件目錄

在新創(chuàng)建的文件目錄下添加index.js（必須，因為是webpack打包入口文件）

在新創(chuàng)建文件夾下添加pageinfo.json（非必須）供html插件使用

npm run dev開發(fā)

|-- src
    |-- index/
    |-- page2/
        |-- index.js
        |-- pageinfo.json

目錄結(jié)構(gòu)調(diào)整

v1.3.0 對整個文件結(jié)構(gòu)做了優(yōu)化

將將頁面文件放在src下的pages里統(tǒng)一管理

增加了store文件夾放redux相關(guān)文件。

對整體文件命名以及結(jié)構(gòu)做了大幅度調(diào)整

Demo頁面

http://www.h5cool.com/react-m...

home頁為一個簡單預覽頁

todo頁是一個基于react-redux的todolist頁面

整頁排版使用bulma.css

完整代碼參考項目react-multi-page-app

GPU云服務器云服務器多頁面應用多頁面應用管理頁面應用詳情頁面

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99877.html

相關(guān)文章

從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

call_me_R 2019-08-23 13:43 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

wzyplus 2019-08-02 12:08 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

aristark 2019-08-29 17:24 評論0 收藏0
本命年一定要記得穿紅褲衩：2015年總結(jié)

摘要：年終總結(jié)結(jié)果到這個時間才寫，其實也是無奈。這一年最重要的事情就是順利從一只學生狗轉(zhuǎn)職為一只社畜。四月份畢業(yè)之后以前端工程師的職位入職天貓，到現(xiàn)在也差不多工作一年了。年終總結(jié)結(jié)果到這個時間才寫，其實也是無奈。本來計劃過年寫的，沒想到Steam竟然開了個農(nóng)歷春節(jié)特惠，然后就被各種游戲打了，辣雞平臺，斂我錢財，頹我精神，耗我青春，害我單身以下全都是個人看法，如果有不認同的地方，請大吼一聲...

AlienZHOU 2019-08-19 17:38 評論0 收藏0
本命年一定要記得穿紅褲衩：2015年總結(jié)

摘要：年終總結(jié)結(jié)果到這個時間才寫，其實也是無奈。這一年最重要的事情就是順利從一只學生狗轉(zhuǎn)職為一只社畜。四月份畢業(yè)之后以前端工程師的職位入職天貓，到現(xiàn)在也差不多工作一年了。年終總結(jié)結(jié)果到這個時間才寫，其實也是無奈。本來計劃過年寫的，沒想到Steam竟然開了個農(nóng)歷春節(jié)特惠，然后就被各種游戲打了，辣雞平臺，斂我錢財，頹我精神，耗我青春，害我單身以下全都是個人看法，如果有不認同的地方，請大吼一聲...

xi4oh4o 2019-08-01 15:06 評論0 收藏0