electron+react-redux-saga基础项目配置

electron-react-base


基于electron + react + redux + saga的基础项目配置
github:https://github.com/maichonglyd/electron-react-base

项目结构:

  • app 最终要打包的目录
  • build 调试项目时打包的目录
  • flow flow语法定义目录
  • img 图片目录
  • scss 界面样式目录
  • src 界面代码目录
  • webpack webpack打包配置目录
src下目录结构:
  • components 界面组件目录
  • pages 界面目录
  • redux 数据组织目录
  • sagas 数据请求目录
  • App.jsx 页面路由配置
  • main-dev.js 项目调试入口
  • main.js 项目打包后的入口
  • renderer.jsx 页面启动文件

项目的调试:

npm init
npm run webpack-renderer-watch
npm run start-dev

调试时如果需要使用图片,可以放入img目录下,在需要打包的时候请把img目录下的图片复制到appimg目录下

项目打包成exe:

如果有图片或别的文件,请复制到app目录下。

npm run build //默认打包成exe,别的系统打包需要另行配置

或者

npm run webpack-main
npm run webpack-renderer
npm run electron-builder

原文地址:https://blog.51cto.com/wuzishu/2415839

时间: 2024-08-28 15:22:27

electron+react-redux-saga基础项目配置的相关文章

react + redux 完整的项目,同时写一下个人感悟

先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angular是一个大而全的框架,用了angular几乎就不需要用其他工具辅助配合,但是react不一样,他只负责ui渲染,想要做好一个项目,往往需要其他库和工具的配合,比如用redux来管理数据,react-router管理路由,react已经全面拥抱es6,所以es6也得掌握,webpack就算是不会配置也

Vue基础项目配置

一,使用Vuejs搭建项目需要一些基础配置,这样能使的编程过程事半功倍 首先下载nodejs,然后使用nodejs使用NPM命令下载VueCli3.0以上的Vue脚手架.通过脚手架可以使用Vue ui图形界面创建项目,也可以使用vue create xxx来使用命令行来创建项目. 创建项目之时最重要的选项就是使用配置文件最好各个配置文件分开,不要集中在<vue.confing.js>. 创建完项目之后启动项目npm run serve. 在项目目录打开一个新的命令提示行来安装Vue的插件和各种

React+Redux实现追书神器网页版

引言 由于现在做的react-native项目没有使用到redux等框架,写了一段时间想深入学习react,有个想法想做个demo练手下,那时候其实还没想好要做哪一个类型的,也看了些动漫的,小说阅读,聚合资源的开源项目.但是由于正好在学习开源的Android小说阅读器--任阅,加上api比较全,开始边学边做,项目地址在这里,如果有好的意见欢迎提issue或pr. 效果图 目录结构 ├─actions #redux的action,业务逻辑 ├─components #页面容器 │ └─common

利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载

如何设计一个大型 web 项目? React + webpack 如何按需加载? React + React-Router 4 + webpack 如何按需加载? React + Redux + React-Router 4 + webpack 如何按需加载? 实录提要: bundle-loader 和 Webpack 内置的 import() 有什么区别? 按需加载能否支持通过请求后台数据,动态配置页面的的应用场景? 参与过几个 React 项目,被依赖包搞的晕晕的,不知道该怎么选择? 什么包

Code::Blocks项目配置基础

File 菜单 New :新建( Empty file/file . class . project . build target ) . Recent projects/files :最近打开的项目 / 文件 . Import projects : Dev-C++ Project . VC6 dsw/dsp . VC8 vcproj/sln . Ctrl+Shift+S : Save all files . Save workspace (as) :将多个项目组织成一个工作空间,类似 VC 的

react+webpack基础学习配置

最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目,过程还算顺利.总结一下步骤: 1.创建一个项目文件夹Blog,cd进入文件夹目录,输入 npm init -y 生成package.json文件: 2.工程目录创建,如下如是我的工程目录 public是webpack打包后生成的文件夹,src是逻辑组件文件夹,assets是静态文件 webpack

6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.) 余博伦· 2 个月前 原文链接:A Study Plan To Cure JavaScript Fatigue 作者:Sacha Greif 和大家一样,最近我也看了Jose Aguinaga写的How it feels to learn JavaScript in 2016. 显然这篇文章击中了人们的痛处.它在Hacker News上排了不止一次第一.同样也是/r/javascript上最火的一篇,在Med

Electron + React + Node.js + ES6 开发本地 App

Electron + React + Node.js + ES6 开发本地 App 1.概述 近来工作上需要做一款 PC 上的软件,这款软件大体来讲是类似 PPT 的一款课件制作软件.由于我最近几年专注于移动 App 的开发,对 PC 端开发的了解有些滞后.所以我首先需要看看,在 PC 上采用什么框架能够顺利完成我的工作. 我的目标是,在完成这款软件的同时能够顺便学习一下比较流行的技术.在经过前期技术调研后,我明确了实现这款软件所需要的技术条件: 不采用 C++ 方面的类库,比如 MFC.Qt.

webpack+react+redux+es6

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程