React多页面应用脚手架-v1.3.0
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
React多页面应用脚手架-v1.3.0的更多相关文章
- webpack+react多页面开发(二)-终极架构
webpack4+react16多页面架构 webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中, ...
- webpack构建react多页面应用
写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应 ...
- FineUI(专业版)v1.2.0 和 FineUI(开源版)v4.1.1 同时发布!
FineUI(开源版)v4.1.1 (建议所有 v4.x 升级到此版本):http://fineui.com/demo/ +2014-08-15 v4.1.1 -修正Form中表单字段设 ...
- 读阿里巴巴Java开发手册v1.2.0之工程结构有感【架构篇】
首先,把昨天那俩条sql语句的优化原因给大家补充一下,第一条效率极低,第二条优化后的,sql语句截图如下: 经过几个高手的评论和个人的分析: 第一条sql语句查询很慢是因为它首先使用了in关键字查询, ...
- 读阿里巴巴Java开发手册v1.2.0之编程规约有感【架构篇】
不为过去蹉跎,改变当下. 为什么开篇就送这么一句话给大家,我相信很多处于1-3年码龄的哥们儿们,在平时的编码历程中编码的个性可能是多彩的,每个人都有每个人特定的风格,但是我们现在这么随意写,以后这么 ...
- AEAI CRM V1.6.0 升级说明,开源客户关系管理系统
1 升级说明 AEAI CRM v1.6.0版是AEAI CRM v1.5.2版客户关系管理系统的升级版本,本次版本是基于AEAI DP v3.8.0_20170228进行打包部署的,升级内容主要是针 ...
- AEAI HR开源人力资源管理v1.6.0发版公告
1 升级说明 AEAI HR v1.6.0版是AEAI HR v1.5.2版人力资源管理系统的升级版本,本次升级的系统是基于AEAI DP 3.8.0_20170228进行打包部署的,升级内容主要是针 ...
- React 列表页面传递参数
React 列表进入详情页面 首先安装 react-router-dom (4.0) npm/yarn install react-router-dom 路由跳转配置 列表 父组件 this.prop ...
- AEAI WM v1.6.0 升级说明,开源工作管理系统
1 升级说明 AEAI WM v1.6.0版是AEAI WM v1.5.0版工作管理系统的升级版本,本次升级的系统是基于AEAI DP 3.8.0_20170228进行打包部署的,对产品中的功能及BU ...
随机推荐
- 团队作业第5周 - 测试与发布(Alpha版本)- 天冷记得穿秋裤队
团队作业第5周 - 测试与发布(Alpha版本)- 天冷记得穿秋裤队 Alpha版本测试报告 在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? 前后端至今一共发现有10个bug,修复的 ...
- MCU编程_基础
包含头文件符号的区别 有这样的包含头文件语句 #include <reg52.h> #include"reg52.h" 两者区别在于: <>:编译器先进入软 ...
- LDO-AMS1117
AMS1117 1.是AMS艾默森公司简称.与AMS1117对应的IC有LM1117.AMS1117的最大输入电压为15V,而LM1117的极限是20V. 2.其输出电压有固定式(1.5V,1.8V, ...
- 2.mongodb可视化工具
(1)去robomongo官方网址下载,官网地址(https://robomongo.org/)选择相应的版本. (2) tar -xzf robo3t-1.2.1-linux-x86_64-3e50 ...
- hiho 第二周
Trie树,第一次写,简单的建树+搜索 它的思路hiho上讲得很清楚,good~ #include<iostream> #include<string> using names ...
- cefsharp
快速上手 js和C#互相调用. C#调用js比较容易.JS调用C#代码,现有两种方法.老方法的缺点是只支持单页,如果切换页面,原有创建的变量就失效了.新方法没有这些问题. 老方法: Cefsharp ...
- WPF 介绍一种在MVVM模式下弹出子窗体的方式
主要是通过一个WindowManager管理类,在window后台代码中通过WindowManager注册需要弹出的窗体类型,在ViewModel通过WindowManager的Show方法,显示出来 ...
- 背水一战 Windows 10 (43) - C# 7.0 新特性
[源码下载] 背水一战 Windows 10 (43) - C# 7.0 新特性 作者:webabcd 介绍背水一战 Windows 10 之 C# 7.0 新特性 介绍 C# 7.0 的新特性 示例 ...
- mysql存储过程双重循环示例
BEGIN ); DECLARE done INT DEFAULT FALSE; DECLARE cursor_rule CURSOR FOR SELECT s.id FROM d_menu_type ...
- 为什么要先 git add 才能 git commit
1. git 的 add ,是一个容易引起疑问的命令.在 subversion 中的 svn add 动作是将某个文件加入版本控制,而 git add的意义完全不同. 同时, git diff --c ...