整理了一下react16.7.0的webpack模板
基本上react需要方法和依赖的库都引配好了。github地址:https://github.com/qianxiaoning/demo-react16.7.0 欢迎大家star或者fork呀~
template-antDesign-sass-react16.7.0
- 目录结构
build/ 生成目录
public/ 静态资源目录,create-react-app会直接把这里的东西起在服务根目录
src/
assets/ 资源文件夹,如图片
components/ 组件
ReactSlotPra 弹窗组件,引用父组件传入的slot数据
ReduxSon redux的修改
Son 事件总线的发射
config/ 参数文件夹
pages/ 页面文件夹
Home 1.react中input的写法
2.react中组件slot的实现方式
News react中组件slot的实现方式
Product 嵌套路由的实现
ParentSonTransmit 1.父子通讯的方式
2.事件总线的监听与销毁
ReduxExperience redux的引用
HocPra 使用hoc高阶组件的公共方法
HttpPra 1.axios请求试验
2.引入antd库
redux/ redux文件夹
router/ router配置
structures/ 结构组件
utils/
events.js 事件总线模块
hoc.js hoc高阶组件(也可以写一些公共的东西,用来替代mixins)
http.js http请求和antd的loading,message的结合封装
urls.js 接口地址的统一管理
utils.js 公共方法,工具函数
AppNote.js 笔记文件
index.js 入口文件
index.scss 公共样式
config-overrides.js customize-cra对create-react-app的webpack的可配置,如为了antd配置了babel-plugin-import
jsconfig.json create-react-app的配置文件,现在只配了项目资源可以绝对路径
package.json proxy设置的地方
整理了一下react16.7.0的webpack模板的更多相关文章
- 从0构建webpack开发环境(一) 一个简单webpack.config.js
本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...
- Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )
1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令 ...
- vue-cli的webpack模板项目配置文件分析
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修 ...
- vue-cli的webpack模板项目配置文件说明
如果没有vue-cli,那么进行vue项目的开发环境配置将是很费力的一件事情,现在脚手架可以快速构建一个开发环境,是很不错的.不过对于脚手架构建的配置,还是要大概了解一下,方便自己调试配置. 初始化一 ...
- 《转》vue-cli的webpack模板项目配置文件注释
一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js ...
- [置顶] vue-cli的webpack模板项目配置文件分析
2017-09-11更新:更新到webpack 2.6.1所对应的配置,完善部分代码注释. 由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和c ...
- 公共组件及脚手架webpack模板
一.公共组件的创建和使用 前面已经学习vue组件时,了解了公共组件,但在脚手架项目中只使用过局部组件.这里是讲解全局组件如何在脚手架项目中去使用. 1.创建全局组件 在src/components/C ...
- Spring Boot 2.0 整合 FreeMarker 模板引擎
本篇博文将和大家一起使用Spring Boot 2.0 和FreeMarker 模板引擎整合实战. 1. 创建新的项目 2. 填写项目配置信息 3. 勾选web 模块 4. 勾选freemarker模 ...
- Spring Boot 2.0 整合Thymeleaf 模板引擎
本节将和大家一起实战Spring Boot 2.0 和thymeleaf 模板引擎 1. 创建项目 2. 使用Spring Initlizr 快速创建Spring Boot 应用程序 3. 填写项目配 ...
随机推荐
- oracle国家字符集
国家字符集是一个备用字符集,利用此字符集可以在没有Unicode 数据库字符集的数据库中存储 Unicode 字符. 选择国家字符集的其它原因如下: 对于频繁的字符处理操作,不同的字符编码方案可能更为 ...
- Leetcode872.Leaf-Similar Trees叶子相似的树
请考虑一颗二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个 叶值序列 . 举个例子,如上图所示,给定一颗叶值序列为 (6, 7, 4, 9, 8) 的树. 如果有两颗二叉树的叶值序列是相同 ...
- 【水滴石穿】douban-movies-react-native
这个项目的话,倒是可以做一个支架页面,就是你需要什么东西,你就可以在里面加,不过也是比较难的地方 就是数据流,数据处理的部分.react可以处理数据的方式很多,没有见过类似于古老的vue时候可以使用的 ...
- LintCode_420 报数
题目 报数指的是,按照其中的整数的顺序进行报数,然后得到下一个数.如下所示: 1, 11, 21, 1211, 111221, ... 1 读作 "one 1" -> 11. ...
- 【JZOJ4799】【NOIP2016提高A组模拟9.24】我的快乐时代
题目描述 输入 一行,两个整数l,r . 输出 一行,一个整数,表示第l 天到第r 天的愉悦值的和. 样例输入 64 89 样例输出 1818 数据范围 解法 可以参考数位动态规划的想法. 从个位开始 ...
- Silverlight 2.5D RPG游戏技巧与特效处理:(五)HLSL渲染动画
原文:Silverlight 2.5D RPG游戏技巧与特效处理:(五)HLSL渲染动画 或许大家依旧对上一节中的“黑夜”及“梦回过去”记忆犹新,追问下去HLSL到底是何方神圣能实现如此炫酷之效果?层 ...
- 基于OSS+DataLakeAnalytics+QuickBI的Serverless的查询分析和可视化BI
基于OSS的数据查询分析和可视化BI报表 数据存储在OSS后,有多种查询分析的方法,包括阿里云MaxCompute.DataLakeAnalytics产品等Severless查询分析服务,也可以自建S ...
- PHP:测试SQL注入以及防止SQL注入
在写登录注册的时候发现了SQL和JS注入这个危害网站的用户举动: 测试方法: SQL注入: 先来做一个测试: 用户名:’ or 1 # 密码:随便写8位以上 验证码:写正确 好吧,就那么简单就进去了: ...
- 用预编译包安装zabbix-agent
如果主机无法上网,安装rpm又缺少依赖时,可以通过预编译包进行安装zabbix-agent,下载地址 https://www.zabbix.com/download 下载后,执行如下命令: wget ...
- Oracle使用——PLSQL查询表结构并导出EXCEL
背景 有一次需要查询Oracle数据库中的所有表接口并且导出excel,方法记录如下 使用 使用PLSQL工具查询表结构,SQL语句如下 SELECT B.TABLE_NAME AS '表名', C. ...