0


从无到有构建electron+vite+vue3

需要使用到nodejs和npm 如果没有的话 ,请先装好,我给出个教程链接,先不细说了。

Nodejs和npm安装:node.js和npm的安装与环境配置(2021最新版)_2021年的npm是什么版本-CSDN博客

yarn安装与验证:

  1. npm i -g yarn
  2. yarn -v

1.创建一个vite+vue应用,使用js。我默认项目名称为:electron_study

  1. yarn create vite electron_study

然后会弹出这个界面:

我们选择Vue就好了。下一步则选择JavaScript。

直到弹出

我们依次输入这三行命令

  1. cd electron_study
  2. yarn
  3. yarn dev

执行 "yarn"的时候可能时间会比较长(取决于网络环境,可以换源,我这边深圳的用华为的源就很快)

最后一行命令是启动前端服务(可以不执行),执行到这里相当于你已经成功创建了一个vite+vue3的web服务了,然后我们还需要把这个前端的框架跟我们的electron结合起来

然后我们再从vs code 打开这个项目

2.安装其他依赖

我们除了基础的项目框架外,还需要一系列的依赖,分别是:

electron | concurrently | cross-env | electron-builder | wait-on

  1. yarn add electron concurrently cross-env electron-builder wait-on -D

在等待安装完成的时候,我们同时在项目文件夹下创建一个文件目录,名为:electron,然后在这个目录下创建一个main.js文件(注意,这个与vue下面的src的main.js不一样),两个文件是独立的

然后在main.js里面给入这样一段初始代码,用来创建electron桌面程序的窗口

  1. const {app,BrowserWindow,Tray, Menu}= require('electron')
  2. const path = require('path')
  3. const NODE_ENV = process.env.NODE_ENV
  4. function createWindow(){
  5. const win = new BrowserWindow({
  6. width:800,
  7. height:600,
  8. //autoHideMenuBar:true
  9. })
  10. win.loadURL(
  11. NODE_ENV ==="development"?
  12. "http://localhost:5173":
  13. `file://${path.join(__dirname,"../dist/index.html")}`
  14. )
  15. }
  16. app.on('ready',()=>{
  17. createWindow();
  18. })//当app ready时创建窗口
  19. app.on('window-all-closed',function(){
  20. if(process.platform !=="darwin")
  21. {
  22. app.quit()
  23. }
  24. })//当窗口被全部关闭时,退出app

然后我们需要配置一下根目录下面的package.json

  1. {
  2. "name": "vite-electron",
  3. "private": true,
  4. "version": "0.0.0",
  5. "main": "electron/main.js",
  6. "scripts": {
  7. "electron:serve": "concurrently -k \"vite\" \"wait-on tcp:5173 && cross-env NODE_ENV=development electron .\"",
  8. "electron:build": "vite build && electron-builder",
  9. "dev": "vite",
  10. "build": "vite build",
  11. "preview": "vite preview",
  12. "electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron ."
  13. },
  14. "build": {
  15. "productName": "electron",
  16. "files": [
  17. "dist/**/*",
  18. "electron/**/*"
  19. ]
  20. },
  21. "dependencies": {
  22. "vue": "^3.4.35"
  23. },
  24. "devDependencies": {
  25. "@vitejs/plugin-vue": "^5.1.2",
  26. "concurrently": "^8.2.2",
  27. "cross-env": "^7.0.3",
  28. "electron": "^31.3.1",
  29. "electron-builder": "^24.13.3",
  30. "vite": "^5.4.0",
  31. "wait-on": "^7.2.0"
  32. }
  33. }

当这两个都配置好了之后,我们在控制台输入启动指令:yarn electron:serve

程序会分别依次执行,先是electron监听我们设置的端口(我上面设置的是5173),然后是vue3+vite的项目

我们的配置文件里,我把编译的部分也写好了,也可以尝试着编译,编译后会出现dist文件夹,里面就会有编译后的程序和安装程序。

那么,到这里我们的基础环境就搞好了呢!

也欢迎各位访问我的个人博客:

https://somehelp.site 谢谢观看


本文转载自: https://blog.csdn.net/weixin_51955359/article/details/141125954
版权归原作者 是楊不是杨 所有, 如有侵权,请联系我们删除。

“从无到有构建electron+vite+vue3”的评论:

还没有评论