vite+Vue3+typrscript+electron使用sqlite3案例
时间: 2023-09-03 19:08:15 浏览: 374
下面是一个使用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. 在`package.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”按钮时,我们从数据库中检索这些数据,并在屏幕上显示它们。
阅读全文