02_快速启动 Demo 创建 Electron 项目、electron-forge 搭建一个 electron 项目、手动创建electron项目

快速启动 Demo 创建 Electron 项目

  • 一、克隆一个仓库、快速启动一个项目
  • [二、electron-forge 搭建一个 electron 项目](#二、electron-forge 搭建一个 electron 项目)
  • [三、手动搭建一个 electron 项目](#三、手动搭建一个 electron 项目)
  • [四、开发工具中配置 Eslint](#四、开发工具中配置 Eslint)

一、克隆一个仓库、快速启动一个项目

要使用 git 的话首先电脑上面需要安装 git

javascript 复制代码
//克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start.git
//进入这个仓库
cd electron-quick-start
// 安装依赖
npm/cnpm install   
//运行
npm run start
// 运行的第二种方式, 注意:命令后面有个 点
electron .

启动后的样式

代码目录结构分析:

二、electron-forge 搭建一个 electron 项目

electron-forge 相当于 electron 的一个脚手架,可以让我们更方便的创建、运行、打包 electron 项目。

Github 地址: https://github.com/electron-userland/electron-forge

官网地址: https://www.electronforge.io/
注意: electron-forge 的 Node 环境需要在 16.4.0 及以上

javascript 复制代码
// 创建项目
npx create-electron-app my-app
# or
yarn create electron-app my-app

// 运行项目
cd my-new-app
npm start

三、手动搭建一个 electron 项目

1、新建一个项目目录,例如:electrondemo

2、在 electrondemo 目录下面新建三个文件: index.html 、main.js、package.json

3、index.html 里面用 css 进行布局(以前怎么写现在还怎么写)

4、在 main.js 中写如下代码:

javascript 复制代码
const {app, BrowserWindow} = require('electron')
const path = require('path')
const createWindow = ()=>{
	const mainWindow = new BrowserWindow({
		width:800,
		height:600
	})
  // __dirname 表示获取我们当前目录, path.join 会将两个参数合并成 d://electrondemo/index.html
	mainWindow.loadFile(path.join(__dirname, 'index.html'))
}
// 监听 electron ready 事件创建窗口
app.on('ready', createWindow);
// 监听窗口关闭的事件,关闭的时候退出应用, macOs 需要排除
app.on('window-all-closed', ()=>{
	if(process.platform !=='darwin') {
		app.quit();
	}
})

// Macos 中点击 dock 中的应用图标的时候重新创建窗口
app.on('activate', ()=>{
  if(BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

创建成功后的文件夹链接,点击进入下载

四、开发工具中配置 Eslint

Eslint 最初是由 Nicholas C.Zakas 于 2013年6月创建的开源项目。它的目标是 提供一个插件化的 JavaScript 代码检测工具

1、安装 cnpm i -g eslint

2、在项目中 运行 eslint --init

相关推荐
熊出没4 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN4 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠10 分钟前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户990450177800918 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家21 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端