how to use electron dev cross-platform applications

第一步先安装 node-js  ,因为 node.js 带有  npm 工具

去  https://nodejs.org/en/

下载windows 版 安装

第二步  , 用 npm 安装 electron , 在 命令行下打 :

 

第三步 , 安装 electron 的 quick-strart 工程

 

当 npm start 后,  就会出现默认的app  ,  如图


如何在 vs code 编辑 , 调试electron 程序

  • vs code 选 file—-> open folder , 打开  quick start 所在的 electron-quick-start 目录

打开后目录结构是这样的

 

在 vscode 按 f1 , type  :   launch ,  选择编辑 launch.json

改为

然后按 f5 , 即可启动程序

 

此部分参考文章 : https://medium.com/@paulirwin/getting-started-with-electron-and-visual-studio-code-typescript-and-react-36d41b68fadb


quick start 并不只包括 hello world 一个程序 , 如何启动其他的  ?

不对, 只有一个

 


 

elcteon  模板库

见 :  https://electronforge.io/templates

  • 先尝试这个  React + TypeScript

React 是一个界面库

安装方法是 :

在本机运行时 , 这一步

包括6个步骤

checking your system

Initializing Project Directory

Initializing Git Repository

Copying Starter Files

Initializing NPM Modules

Installing NPM Dependencies 

其中红字部分特别的慢  , 原因是 :

********************************************************************

 

如何快速创建一个 react 程序

create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板,有助于初学者快速上手实践。

****************

React 官方教程

https://reactjs.org/docs/hello-world.html

****************

  • React grid layout    用来画界面的库

网址 :  https://github.com/STRML/react-grid-layout

安装方法 :

 

 

 

 

 


附录

 

  • 在中国怎么安装  npm 的镜像

From  https://www.npmjs.com/package/mirror-config-china

参考 https://stackoverflow.com/questions/22764407/npm-install-goes-to-dead-in-china

  • 例子程序

官方例子

https://reactjs.org/community/examples.html

(BUILD A LIVE PAINT APPLICATION WITH REACT)

https://pusher.com/tutorials/live-paint-react