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 ...
 
随机推荐
- springMVC一个Controller处理所有用户请求的并发问题
			
有状态和无状态的对象基本概念: 有状态对象(Stateful Bean),就是有实例变量的对象 ,可以保存数据,是非线程安全的.一般是prototype scope. 无状态对象(Stateless ...
 - Http站点转Https站点教程
			
https://blog.csdn.net/tanga842428/article/details/79273226 Http站点转Https站点教程 2018年02月28日 12:04:35 坦GA ...
 - QuartzNet使用
			
quartz.config # You can configure your scheduler in either <quartz> configuration section # or ...
 - CentOS 7配置nginx-1.13.10支持http/2和Server Push
			
0.确保openssl版本大于1.0.2 openssl version 1.下载nginx-1.13.10 wget http://nginx.org/download/nginx-1.13.10. ...
 - 【转】AngularJs HTTP请求响应拦截器
			
任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...
 - CF1146H Satanic Panic
			
题目传送门 Description 给定二维平面内\(n\)个点\((n\leq 300)\),求能组成五角星(不要求正五角星)的五元组个数. Solution 一道小清新的寄蒜几盒计算几何题,代码不 ...
 - cad2016卸载/安装失败/如何彻底卸载清除干净cad2016注册表和文件的方法
			
cad2016提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2016失败提示cad2016安装未完成,某些产品无法安装,也有时候想重新安装cad2016 ...
 - vue中封装公共方法,全局使用
			
1.以封装的合并单元格为例,首先建立一个util.js 2.在main.js中引用 3.直接在使用该方法的地方调用就可以了
 - 关于OC中的几种延迟执行方式
			
第一种: [UIView animateWithDuration: delay: options: animations:^{ self.btn.transform = CGAffineTransfo ...
 - Docker端口映射(六)
			
一.容器端口映射 1.1. 外部访问容器 在启动容器时候,如果不指定参数,在容器外部是无法通过网络来访问容器内的服务的 当容器运行一些网络服务的时候,我们可以通过指定-p或者-P参数来实现能够让外部访 ...