下面是一个使用vite、
Vue3、TypeScript和
Electron的
SQLite3案例：
1. 首先，创建一个新的
Electron项目：
```
mkdir my-
electron-project
cd my-
electron-project
npm init -y
npm install --save-dev
electron
```
2. 安装vite作为前端构建工具：
```
npm install --save-dev vite
```
3. 创建一个新的
Vue3项目：
```
npm install --save-dev
vue@next
npm install --save-dev @
vue/compiler-sfc
```
4.
集成TypeScript：
```
npm install --save-dev typescript
npm install --save-dev @types/node
npm install --save-dev @types/
electron
```
5. 安装
SQLite3依赖：
```
npm install --save
sqlite3
```
6. 在你的项目根目录下创建一个`src`文件夹，然后在`src`下创建一个新的`main.ts`文件，作为
Electron应用程序的入口点：
```
import { app, BrowserWindow } from '
electron';
let win: BrowserWindow | null = null;
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
win.loadURL(`http://localhost:3000`);
win.webContents.openDevTools();
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
```
7. 在`src`下创建一个新的`renderer.tsx`文件，用于渲染
Vue3组件：
```
import { createApp } from '
vue';
import App from './App.
vue';
createApp(App).mount('#app');
```
8. 在`src`下创建一个新的`App.
vue`文件，这是
Vue3的根组件：
```
<template>
<div id="app">
<h1>
SQLite3 Example</h1>
<p v-if="data">Data: {{ data }}</p>
<button @click="fetchData">Fetch Data</button>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from '
vue';
import
sqlite3 from '
sqlite3';
export default defineComponent({
setup() {
const state = reactive({
data: null,
});
const fetchData = () => {
const db = new
sqlite3.Database(':memory:');
db.serialize(() => {
db.run('CREATE TABLE lorem (info TEXT)');
const stmt = db.prepare('INSERT INTO lorem VALUES (?)');
for (let i = 0; i < 10; i++) {
stmt.run(`Ipsum ${i}`);
}
stmt.finalize();
const results: string[] = [];
db.each('SELECT rowid AS id, info FROM lorem', (err, row) => {
results.push(`${row.id}: ${row.info}`);
}, (err, count) => {
state.data = results.join('\n');
});
});
db.close();
};
return {
data: state.data,
fetchData,
};
},
});
</script>
<style>
body {
font-family: sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
#app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
button {
margin-top: 2em;
padding: 1em;
font-size: inherit;
}
</style>
```
9. 在项目根目录下创建一个新的`index.html`文件，作为
Vue3应用程序的入口点：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
SQLite3 Example</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/renderer.tsx"></script>
</body>
</html>
```
10. 在项目根目录下创建一个新的`main.ts`文件，作为vite的入口点：
```
import { app, BrowserWindow } from '
electron';
import path from 'path';
import url from 'url';
import vite from 'vite';
let win: BrowserWindow | null = null;
async function createWindow() {
const viteServer = await vite.createServer({
server: {
middlewareMode: true,
},
});
await viteServer.listen();
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
if (process.env.NODE_ENV === 'development') {
win.loadURL(`http://localhost:3000`);
} else {
win.loadURL(
url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true,
})
);
}
win.webContents.openDevTools();
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
```
11. 在`packa
ge.json`中添加以下脚本：
```
"scripts": {
"dev": "cross-env NODE_ENV=development
electron .",
"build": "cross-env NODE_ENV=production vite build &&
electron .",
"start": "
electron ."
}
```
12. 运行开发服务器：
```
npm run dev
```
13. 运行
Electron应用程序：
```
npm run start
```
这样，你就可以在
Electron应用程序中使用
SQLite3了。在这个示例中，我们创建了一个内存
数据库，并插入了10条数据。当用户点击“Fetch Data”按钮时，我们从
数据库中检索这些数据，并在屏幕上显示它们。
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
