以下是一个简单的示例,展示如何使用 Electron、Vite 和 SQLite 创建一个基本的收藏夹程序。
首先,确保你已经安装了 Node.js 和 npm。
- 创建新项目:
mkdir fav-app
cd fav-app
npm init -y
- 安装 Electron 和 Vite 相关依赖:
npm install --save-dev electron vite
- 创建项目结构:
fav-app
├── src
│ ├── main
│ │ └── main.js
│ └── renderer
│ ├── App.vue
│ ├── index.css
│ └── index.html
├── vite.config.js
└── package.json
- 配置
vite.config.js
:
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
root: resolve(__dirname, 'src/renderer'),
base: './',
build: {
outDir: 'dist',
assetsDir: 'assets',
},
server: {
open: true,
},
});
- 配置
package.json
:
{
"name": "fav-app",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"electron-dev": "vite build && electron .",
"electron-pack": "vite build && electron-packager . fav-app --platform=darwin --arch=x64 --icon=favicon.icns",
"start": "electron ."
},
"devDependencies": {
"electron": "^20.1.0",
"electron-packager": "^15.4.0",
"vite": "^2.6.4"
}
}
- 创建
main.js
(在 src/main
目录):
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL('http://localhost:3000');
}
app.whenReady().then(createWindow);
- 创建
App.vue
(在 src/renderer
目录):
<template>
<div>
<h1>Favorites App</h1>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
/* Your CSS styles here */
</style>
- 使用 SQLite 进行数据库操作,安装
sqlite3
:
npm install sqlite3
在 src/main
目录下创建 database.js
文件,并添加以下内容:
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
let db = new sqlite3.Database(
path.resolve(__dirname, '../db/favorites.db'),
(err) => {
if (err) {
console.error(err.message);
} else {
console.log('Connected to the SQLite database.');
}
}
);
module.exports = db;
在 main.js
中引入并使用 db
变量:
const db = require('./database'