2024最新版本 electron + vite + sqlite 开发收藏夹程序【续一】

已于 2024-01-08 14:43:58 修改
阅读量887 收藏 18
点赞数 24
分类专栏： electron vue 文章标签： electron sqlite javascript
于 2024-01-05 12:41:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42341682/article/details/135400928
版权

顶部下载本节源码

2024最新版本 electron + vite + sqlite 开发收藏夹程序
2024最新版本 electron + vite + sqlite 开发收藏夹程序【续一】
2024最新版本 electron + vite + sqlite 开发收藏夹程序【完结】

上一篇我已经搭建好了基础框架

接下来要做的是

  1. 项目改造：改造项目结构，修改 vite.config.js & electron/main.js 中的相关配置，以使项目能自动加载所需第三方包，并设计出多页面应用
  2. 通信：electron 与 vue 之间的 IPC 通信
  3. 数据库设计： SQLite 初始数据结构

项目改造

删除文件

  1. 删除 src 目录下 main.js、App.vue、style.css
  2. 删除根目录下 index.html

添加目录与文件

  1. src 目录下新建两个目录 index、favroite
  2. 在新增的两个目录下分别创建 main.js、index.html、App.vue 三个页面

现阶段仅需要简单创建页面，两个文件夹中的三个页面可以相同，内容分别如下
main.js

import { createApp } from 'vue';
import App from './App.vue';

import 'tdesign-vue-next/dist/reset.css';
import 'tdesign-vue-next/es/style/index.css';

const app = createApp(App);
app.mount('#app')

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的APP</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.js"></script>
  </body>
</html>

App.vue

<template>
  <t-layout align="center">
    <t-space direction="vertical">
      <t-header> 关闭 </t-header>
      <t-content> index </t-content>      
    </t-space>
  </t-layout>
</template>

修改文件 vite.config.js & electron/main.js

  1. 修改 vite.config.js 为如下内容
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {join, resolve} from 'path'

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';

const assetsPath = (path) => {
  return join('static', path)
}

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [TDesignResolver({
        library: 'vue-next'
      })],
    }),
    Components({
      resolvers: [TDesignResolver({
        library: 'vue-next'
      })],
    }),
    vue()
  ],
  
  base:"./",  
  root: "./src/pages",
  build: {
    outDir: resolve(process.cwd(),'build'),
    sourcemap: false, 
    chunkSizeWarningLimit: 1500,
    assetsDir: 'static',
    minify: 'esbuild',
    rollupOptions: {      
      input: {       
        index: resolve(__dirname, 'src/pages/index/index.html'),        
        favroite: resolve(__dirname, 'src/pages/favroite/index.html'),
      },
      output: {
        entryFileNames: assetsPath('js/[name].js'),
        chunkFileNames: assetsPath('js/[name].js'),
        assetFileNames: assetsPath('css/[name].[ext]'),
        compact: true,
        manualChunks: (id) => {
          if(id.includes("node_modules")) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    },
    emptyOutDir: true,
  }
})
  1. 修改 electron/main.js 为如下内容
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
const isPackaged = app.isPackaged

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

var mainWindow 

app.whenReady().then(() => {
    createMainWindow()  
    app.on("activate", () => {
      if (BrowserWindow.getAllWindows().length === 0) createMainWindow()
    })
  })

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

/**创建主窗口 */
const createMainWindow = () => {
  mainWindow = new BrowserWindow({
    frame:false,    
    fullscreenable:false,
    fullscreen: false,
    maximizable: false,
    shadow: true,
    hasShadow: true,
    resizable: false,
    width: 880,
    height: 500,
    webPreferences:{
      nodeIntegration:true,
      contextIsolation: true,    
      preload: path.join(__dirname, 'preload.js')   
    }
    
  })
  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
  })

  if (!isPackaged){
    mainWindow.loadURL("http://localhost:5173/index/index.html");
  }else{
    mainWindow.loadFile(path.resolve(__dirname, '../build/index/index.html'))
  }

}

改造到这一步，vscode 终端执行 yarn run electron:dev，
在这里插入图片描述

通信

经过一系列改造，需要进行功能上的开发了，我设计的是无边框、多应用模式，涉及到了 electron 的进程间通信

渲染器进程1
渲染器进程2
渲染器进程3
渲染器进程N
主进程
收藏夹
数据统计
历史记录
...

preload.js

在 electron 目录下新建 preload.js，通过预加载脚本暴露 ipcRenderer API，消息从渲染器进程发送到主进程

const { contextBridge, ipcRenderer, shell } = require( "electron" );

contextBridge.exposeInMainWorld("electron", {
    ipcRenderer,
    shell // 暴露 shell 使项目可调用系统浏览器打开收藏夹网页 
})

继续改造

无边框窗口打开后，需要关闭，最小化，最大化，新建渲染器进程窗口等，这里仅演示关闭与新建窗口，其他请查阅 electron 官方文档

修改后的 electron/main.js，实现可创建、关闭窗口功能

const { app, BrowserWindow, ipcMain} = require('electron')
const path = require('node:path')
const isPackaged = app.isPackaged

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

var mainWindow 

app.whenReady().then(() => {
    createMainWindow()  
    app.on("activate", () => {
      if (BrowserWindow.getAllWindows().length === 0) createMainWindow()
    })
  })

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

/**创建主窗口 */
const createMainWindow = () => {
  mainWindow = new BrowserWindow({
    frame:false,    
    fullscreenable:false,
    fullscreen: false,
    maximizable: false,
    shadow: true,
    hasShadow: true,
    resizable: false,
    width: 880,
    height: 500,
    webPreferences:{
      nodeIntegration:true,
      contextIsolation: true,     
      preload: path.join(__dirname, 'preload.js') 
    }
    
  })
  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
  })

  if (!isPackaged){
    mainWindow.loadURL("http://localhost:5173/index/index.html");
  }else{
    mainWindow.loadFile(path.resolve(__dirname, '../build/index/index.html'))
  }

}

/**主窗口最小化 */
ipcMain.on('minWindow', (e, data) => {
  mainWindow.minimize()
})
/**关闭主窗口 */
ipcMain.on('closeWindow', (e, data) => {
  mainWindow.close()
})

/**创建普通子窗口 */
const createOtherWindow = (data) => {
  console.log(data)
  otherWindow = new BrowserWindow({
      height: data.height || 640,
      width: data.width || 480,
      center: true,
      frame:false,
      fullscreen:false,
      fullscreenable: false,
      closable: true,
      resizable: false,
      maximizable: false,
      webPreferences: {
        nodeIntegration: true,
        webSecurity: false,
        webviewTag: true,
        enableRemoteModule: true,
        nodeIntegrationInWorker: true,      
        nodeIntegrationInSubFrames: true,
        preload: path.join(__dirname, 'preload.js')      
      }
    
  })
  otherWindow.on('ready-to-show', () => {
    otherWindow.show()
  })

  if (!isPackaged){
    otherWindow.loadURL("http://localhost:5173/" + data.name +"/index.html");
  }else{
    otherWindow.loadFile(path.resolve(__dirname, '../build/' + data.name + '/index.html'))
  }

}

/**建立普通子窗口 */
ipcMain.on('createOtherWindow', (e, data) => {
  createOtherWindow(data)
})
/**关闭普通子窗口 */
ipcMain.on('closeOtherWindow', () => {
  otherWindow.close()
})

相对应的需要改造 src/index/App.vue
修改后的App.vue

<script setup>
const ipcRenderer = window.electron.ipcRenderer

//关闭主窗口
const closeWindow = () => {
  ipcRenderer.send('closeWindow')
}

//创建子窗口
const createOtherWindow = (e, b) => {
  ipcRenderer.send('createOtherWindow', {
    height: 720,
    width: 1280,
    name: "favroite"
  })
}


</script>
<template>
  <t-layout align="center">
    <t-space direction="vertical">
      <t-header>
        <t-button  @click="closeWindow">关闭窗口</t-button>
      </t-header>
      <t-content> 
        <t-button @click="createOtherWindow">我的收藏</t-button>
      </t-content>      
    </t-space>
  </t-layout>
</template>

vscode 终端执行 yarn run electron:dev 看效果

数据库设计

版面与时间关系，数据库设计留到下一节再讲，喜欢的朋友帮忙点个赞，有任何疑问可以留言

代码小涛
关注
  • 24
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
更新electron-vue构建的项目中electron版本
有理想的咸鱼焦
02-16 5805
更新electron-vue构建的项目中electron版本 使用electron-vue构建的项目中，electron版本为v2.0.4，目前electron官方已经更新到v8.0.1，官网文档有些已经不适用与2.0.4，因此手动更新此项目中electron。 步骤如下 删除原依赖 直接执行 npm install electron --save -dev或者先 npm uninstall ...
2024最新版本 electron + vite + sqlite 开发收藏夹程序续一配套代码
最新发布
01-05
# 2024最新版本 electron + vite + sqlite 开发收藏夹程序 > NPM： > cd your-project > npm install > npm run electron:dev > YARN： > cd your-project > yarn > yarn run electron:dev
2023 electron最新最简版windows、mac打包、自动升级详解
woyebuzhidao321的博客
11-05 5308
这里我将讲解一下从0搭建一个electron最简版架子，以及如何实现打包自动化更新之前我有写过两篇文章关于electron框架概述以及 常用api的使用，感兴趣的同学可以看看。
electron-vue实现自动更新版本的另一类方法
qq_32429257的博客
12-17 3919
首次使用electron-vue实现桌面应用，其中遇到n多的坑，一次次的从坑中爬起再跌下再爬起。。。 1.实现版本的自动更新： 首先想到的是autoUpdater，就按着百度的方法（完全没有问题）比葫芦画瓢的实现了，但由于打包的是合在一起打包的，有些参数可能没有，另外就是我们的下载的连接是按照登录的服务器地址（也就是不是固定的地址），诸多不便，于是放弃这种方式； 于是乎，便使用以下方法 /...
Electron 3 稳定版正式发布，4.0 的 beta 版已在开发中
weixin_34008933的博客
11-09 334
Electron 团队最近发布了Electron 3。最新版本包括很多增强和改进，支持读取海量文件，更好的应用程序管理 API 以及日志和性能测量功能。与很多现代软件项目一样，Electron 努力发布更多的常规版本，版本之间少一些重大变更。在 2.0.0 和 3.0.0 版本之间仅隔了四个月，版本 4 的 beta 版本已经在开发当中，Electron 旨在为通过 Node.js、Chrome ...
Vue+Electron学习系列 (四) -- 自动更新进阶
Bennett_G博客
09-17 5005
​​​​​​​1️⃣Vue+Electron学习系列 (一) -- 初识​​​​​​​2️⃣ Vue+Electron学习系列 (二) -- 打包发布3️⃣ Vue+Electron学习系列 (三) -- 自动更新4️⃣ Vue+Electron学习系列 (四) -- 自动更新进阶此篇主要介绍并实现Electron通过渲染进程触发其更新操作流程。......
electron+vite+vue3+sqlite3基础框架
12-14
本项目是一个基于`Electron`的桌面应用程序开发框架，它结合了现代前端开发工具`Vite`和流行的前端框架`Vue.js`的最新版本`Vue3`，以及轻量级的本地数据库系统`SQLite3`。这个基础框架为开发者提供了一个快速启动新...
Electron之集成vue+vite开发桌面程序
10-17
在electron中集成vue+vite框架开发桌面程序，此处是源代码，使用说明可以查看在线文档https://blog.csdn.net/BDawn/article/details/133887110
Electron+Vite+Vue3 模版
05-31
标题 "Electron+Vite+Vue3 模版" 提供了一个关于软件开发的集成环境，它结合了三个强大的技术栈：Electron、Vite 和 Vue3。这个模版是为开发者构建跨平台桌面应用而设计的，允许开发者使用现代前端技术栈的同时，...
基于 electron + vite + vue3 + pinia的基础开发模版.zip
05-18
基于 electron + vite + vue3 + pinia的基础开发模版 基于 electron + vite + vue3 + pinia的基础开发模版 基于 electron + vite + vue3 + pinia的基础开发模版 基于 ...
electron自动更新版本electron-updater
舜岳的博客
11-28 7078
首先来看效果图： 打包electron生成新的exe安装包：npm run dist 使用simplehttpserver开启存放打包好的exe安装包与yml文件的本地服务(打包目录里有这两个文件) 安装simplehttpserver： npm i simplehttpserver -g 开启服务：simplehttpserver 文件夹名称 默认开启8000端口 安装旧版本的exe文件，就会......
electron 自动更新踩坑
风吹云灭
05-24 4564
在使用electron react ant deasgn 开发桌面应用时自动更新时遇到的问题。 因为在项目中用到window.print网页打印。在提升elecreon-builder 版本后发现打印时样式总是显示不对。elecreon-builder 的版本必须要低于20，不然就会出现这个问题。 当electron-builder 版本升级后，老的版本不能直接通过自动升级升上去。 当提示elec...
Electron客户端的自动升级方案-2022版
热门推荐
呦呦鹿鸣
02-10 1万+
Electron桌面应用程序的打包和自动升级有多套方案，网上信息量很大，本文整理出来切实可行的两套方案，实测通过，并提供完整源代码。
electron 已有版本_更新electron的版本
weixin_42206399的博客
01-14 1951
['0.1.0','0.1.1','0.1.2','0.2.0','0.2.1','0.3.0','0.4.0','0.4.1','1.3.1','1.3.2','1.3.3','1.3.4','1.3.5','1.3.6','1.3.7','1.3.8','1.3.9','1.3.10','1.3.12','1.3.13','1.3.14','1.3.15','1.4.0','1.4.1','1...
electron vue 自动下载更新版本
小白菜
05-19 959
1、检查版本号，是否过低（小于3需要更新） 2、更新electron版本 （不行可以尝试 直接删除module，重新安装） 1.卸载electron npm uninstall electron 2.重新安装最新版本 npm install electron --save-dev 如图 当前最新版本： 3、安装一下更新插件 npm install electron-updater --save 4、需要安装的安装完毕，下面进行配置： 需要新建一个js，用来检测版本..
Electron指定版本下载
Acotiock的博客
06-30 3044
一. npm install -g cnpm --registry=https://registry.npm.taobao.org //cnpm安装 cnpm -v //测试是否安装成功 二. cnpm install electron@^9.0.5 -g //下载指定Electron版本
electron-vue升级electron到最新的版本后启动不起来，窗口一闪而过。
csx blog
08-17 819
升级electron到最新的版本后启动不起来，窗口一闪而过。
Electron学习：新版本electron使用remote
weixin_40995362的博客
06-01 1071
新版本electron中使用remote
更新electron的版本
Sobered的博客
06-01 4307
方式1   首先，查看electron的版本 electron -v     发现版本为1.4.13 我们输入如下的cmd来查看 electron系列版本 npm view electron versions 可供更新的版本有如下[部分截图]: 完整可供下载的版本如下： [ '0.1.0', '0.1.1', '0.1.2', '0.2.0', '0.2.1', '0.3.0', '0.4.0', '0.
electron+vite+vue3
07-27
Electron + Vite + Vue3 是一个强大的组合，可以用于开发跨平台的桌面应用程序。 Electron 是一个基于 Chromium 和 Node.js 的开源框架，它允许使用 Web 技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码小涛

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值