当前位置: 首页 > news >正文

[electron] 一 vue3.2+vite+electron 项目集成

一 开发环境

系统:windows

开发工具: git , vscode,termial

环境依赖: node, npm

二 步骤

2.1 通过vite 创建vue项目

通过 终端执行命令,选择 模板 vue

npm init vite cd 项目目录
npm install 
npm run dev

2.2 集成 electron

  1. 安装electron依赖  

npm install  electron --save-dev 

若安装出现 `RequestError: self-signed certificate in certificate chain` 错误可使用 下面命令,(需要在git_bash或者支持linux命令终端中执行,)

NODE_TLS_REJECT_UNAUTHORIZED=0  npm install  electron --save-dev
  1. 安装 vite-plugin-electron,这个需要安装再 devDependencies中

使用说明 https://github.com/electron-vite/vite-plugin-electron

npm i vite-plugin-electron -D
  1. 项目根目录下创建electron 文件夹,用于存放electron相关的代码

  1. 修改 vite.config.js,支持 electron

# 新增部分
import electron from 'vite-plugin-electron'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([{entry:"electron/main/index.ts",vite:{build: {outDir: "dist/electron/main"}}}],)],
})
  1. 修改package.json

去除 "type": "module", 新增 "main":"dist/electron/main/index.js",

  1. 通过 npm run dev 即可预览

三 验证

接下来看 electron 和vue怎么通信 ?

http://www.lryc.cn/news/1269.html

相关文章:

  • ESP32 Arduino(十二)lvgl移植使用
  • js一数组按照另一数组进行排序
  • JavaScript 类继承
  • MySQL相关面试题
  • Python创意作品说明怎么写,python创意编程作品集
  • icomoon字体图标的使用
  • Java · 常量介绍 · 变量类型转换 · 理解数值提升 · int 和 Stirng 之间的相互转换
  • JVM从跨平台到跨专业 Ⅲ -- 类加载与字节码技术【下】
  • ucore的字符输出
  • 【ESP 保姆级教程】玩转emqx数据集成篇① ——认识数据集成
  • PMP报考条件?
  • Vite+Vue3实现版本更新检查,实现页面自动刷新
  • LeetCode刷题模版:292、295、297、299-301、303、304、309、310
  • 20、CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
  • 第五节 字符设备驱动——点亮LED 灯
  • 浅谈小程序开源业务架构建设之路
  • git、gitee、github关系梳理及ssh不对称加密大白话解释
  • UDP协议详解
  • Myb atis基础3
  • VHDL语言基础-时序逻辑电路-寄存器
  • 高通开发系列 - linux kernel更新msm-3.18升至msm-4.9
  • 【Tensorflow2.0】tensorflow中的Dense函数解析
  • PyTorch学习笔记:data.RandomSampler——数据随机采样
  • 设计模式(七)----创建型模式之建造者模式
  • DCGAN
  • 【速通版】吴恩达机器学习笔记Part3
  • 【leetcode】跳跃游戏
  • 论文投稿指南——中文核心期刊推荐(冶金工业 2)
  • 【GPLT 二阶题目集】L2-044 大众情人
  • SpringBoot整合(二)MyBatisPlus技术详解