创建Electron项目

这篇具有很好参考价值的文章主要介绍了创建Electron项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、使用vite 构建 electron项目

npm init vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
√ Project name: ... CertificateDownload
√ Package name: ... certificatedownload
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in E:\electron\CertificateDownload...

Done. Now run:

  cd CertificateDownload
  npm install
  npm run dev

按说明输入如下命令

cd CertificateDownload
npm install
npm run dev

  VITE v4.4.6  ready in 565 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

创建Electron项目,electron,javascript,前端

安装electron

npm install electron -D
npm install vite-plugin-electron -D

如果提示

error command failed

error command C:\Windows\system32\cmd.exe /d /s /c node install.js

可能是没有python环境,需要自行安装,或者通过下面方式进行安装

使用cnpm i electron --save-d进行安装,提示

√ All packages installed (72 packages installed from npm registry, used 2m(network 4s), speed 591.99kB/s, json 70(1.16MB), tarball 1.4MB)

如果

如图所示 当执行npm i electron -D会一直卡在这个地方

解决办法 使用cnpm

cnpm install electron -D
cnpm install vite-plugin-electron -D
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功

根目录新建 electron / index.ts

创建Electron项目,electron,javascript,前端

修改vite.config.ts 配置文件

import  { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), electron({
    main: {
      entry: "electron/index.ts"
    }
  })]
})

编写代码 electron / index.ts

import { app, BrowserWindow } from 'electron'
import path from 'path'
//app 控制应用程序的事件生命周期。
//BrowserWindow 创建并控制浏览器窗口。
 
let win: BrowserWindow | null;
//定义全局变量获取 窗口实例
 
const createWindow = () => {
    win = new BrowserWindow({
        //
        webPreferences: {
            devTools: true,
            contextIsolation: false,
            nodeIntegration: true
            //允许html页面上的javascipt代码访问nodejs 环境api代码的能力(与node集成的意思)
        }
    })
    if (app.isPackaged) {
        win.loadFile(path.join(__dirname, "../index.html"));
    } else {
//VITE_DEV_SERVER_HOST 如果是undefined 换成  VITE_DEV_SERVER_HOSTNAME
        win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`)
    }
}
//isPackage 不好使换下面的
  //  if(process.env.NODE_ENV != 'development'){
      //  win.loadFile(path.join(__dirname, "../index.html"));
  //  }else{
        //win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOSTNAME']}:${process.env['VITE_DEV_SE//RVER_PORT']}`)
   // }
//在Electron完成初始化时被触发
app.whenReady().then(createWindow)

配置package json 增加main 字段 type 去掉

{
  "name": "certificatedownload",
  "private": true,
  "version": "0.0.0",
  "main": "electron/index.ts",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "start": "electron ."
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "electron": "^25.3.1",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-electron": "^0.12.0",
    "vue-tsc": "^1.8.5"
  }
}

将start修改为"start": "electron"

运行npm run start

创建Electron项目,electron,javascript,前端

环境没有问题

将start修改为"start": "electron ."

创建Electron项目,electron,javascript,前端

 

扩展
如果直接快速新建一个electron项目
 文章来源地址https://www.toymoban.com/news/detail-615986.html

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

到了这里,关于创建Electron项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite + electron 构建前端桌面应用程序

    npm yarn 选择是否继续 项目名称 选择框架 选择项目语言 项目构建成功,根据提示进入项目目录,安装依赖 electron 官网:https://www.electronjs.org/zh/docs/latest/ vite-plugin-electron :https://github.com/electron-vite/vite-plugin-electron 安装依赖(electron 安装比较慢,耐心等待即可) 编写 Electron 入

    2024年02月06日
    浏览(50)
  • 前端(Electron Nodejs)如何读取本地配置文件

    使用electron封装了前端界面之后,最终打包为一个客户端(exe)。但是,最近项目组内做CS(c++开发)的,想把所有的配置都放进安装目录的配置文件中(比如config.json)。这做法,对于纯前端而言有点难以接收。 第一,纯前端不允许读取本地文件。就这一条,直接封死所有的

    2024年02月16日
    浏览(48)
  • photoshop生成器引入到electron项目(electron与photoshop建立通信)

    Photoshop引入了nodejs,在启动的时候,通过pipe调起nodejs运行时核心generator-builtin,通过KLVR机制与ps进行通信和交互,同时会加载用户编写的扩展。 这里记录一下引入时的踩坑过程 generator-core就是它的源码,electron的主进程是nodejs环境,如果可以将core这套代码在electron的主进程中

    2024年02月13日
    浏览(35)
  • 前端桌面应用开发实践:Electron入门指南

    随着互联网的快速发展,前端开发不再局限于网页应用,而是逐渐涉及到桌面应用的开发。Electron作为一种流行的前端桌面应用开发框架,为开发者提供了一种快速构建跨平台桌面应用的方式。本文将介绍Electron的基本概念和使用方法,并通过一个简单的示例来说明其开发实践

    2024年02月11日
    浏览(46)
  • Electron项目架构方案心得

    这里只记录FE的业务流程设计考虑和Electron的业务流程考虑。 一个electron客户端,理想的架构是,底层的能力支持完全由electron底层模块支持。关于electron底层模块的支持,不限于node packages 或者 dll 或者 rust实现的一些东东。而业务流程全部交由FE来进行流程控制和调度。 这样

    2024年01月24日
    浏览(30)
  • Electron入门,项目启动。

    electron 简单介绍: 实现:HTML/CSS/JS桌面程序,搭建跨平台桌面应用。 electron 官方文档: [ https://electronjs.org/docs ] 本文是基于以下2篇文章且自行实践过的,可行性真实有效。 文章1: https://www.cnblogs.com/sunshine-blog/p/9915222.html 文章2:https://jingyan.baidu.com/album/9225544671aecf851648f484.h

    2024年02月12日
    浏览(34)
  • 小笔记:Electron中关联格式、处理文件、创建链接的相关编程

    Electron 笔记:Electron中关联格式、处理文件、创建链接的相关编程 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/131041514 【介绍】:本文介绍关于在Electron中绑定文件格式、在菜单

    2024年02月09日
    浏览(34)
  • Electron 和 Angular 项目升级

    原项目 Angular 和 Electron 版本: @angular/cli: 1.4.9 @angular/core: 4.4.6 Electron: 1.7.8 升级后 Angular 和 Electron 版本: Angular: 13.3.1 Electron: 21.2.1 流程: angular-electron 这是一个结合 Angular 和 Electron 的项目。以此为基准环境,不需要从头构建。这个项目的 Angular13 对应的 electron 为 v18,再手动到升

    2024年02月16日
    浏览(37)
  • electron项目开发环境搭建

    由于最近需要做一款跨平台的桌面应用,所以选择使用electron来作为开发的框架,下面说一下如何搭建一个简单的electron项目: 一、准备工作 安装git:下载git | 官网 安装node:下载 | Node.js 中文网 安装npm/cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org  安装electron:cnpm i

    2024年02月13日
    浏览(39)
  • 安装electron项目报错问题

    npm install electron项目报错RequestError: socket hang up electron的安装并不依赖本地npm中registry所配置的镜像,需要增加名称为electron_mirror的镜像源,根目录新建.npmrc文件,添加electron_mirror=https://npm.taobao.org/mirrors/electron/即可。 修改后的文件内容如下:

    2024年02月04日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包