下面是一个使用
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 &#
39;
electron&#
39;;
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
.webConten
ts.openDevTools();
win
.on(&#
39;closed&#
39;, () => {
win = null;
});
}
app
.on(&#
39;ready&#
39;, createWindow);
app
.on(&#
39;window-all-closed&#
39;, () => {
if (process
.platform !== &#
39;darwin&#
39;) {
app
.quit();
}
});
app
.on(&#
39;activate&#
39;, () => {
if (win === null) {
createWindow();
}
});
```
7
. 在`src`下创建一个新的`renderer
.tsx`文件，用于渲染
Vue3组件：
```
import { createApp } from &#
39;
vue&#
39;;
import App from &#
39;
./App
.vue&#
39;;
createApp(App)
.mount(&#
39;#app&#
39;);
```
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 &#
39;
vue&#
39;;
import
sqlite3 from &#
39;
sqlite3&#
39;;
export default defineComponent({
setup() {
const state = reactive({
data: null,
});
const fetchData = () => {
const db = new
sqlite3.Database(&#
39;:memory:&#
39;);
db
.serialize(() => {
db
.run(&#
39;CREATE TABLE lorem (info TEXT)&#
39;);
const stmt = db
.prepare(&#
39;INSERT INTO lorem VALUES (?)&#
39;);
for (let i = 0; i < 10; i
++) {
stmt
.run(`Ipsum ${i}`);
}
stmt
.finalize();
const resul
ts: string[] = [];
db
.each(&#
39;SELECT rowid AS id, info FROM lorem&#
39;, (err, row) => {
resul
ts.push(`${row
.id}: ${row
.info}`);
}, (err, count) => {
state
.data = resul
ts.join(&#
39;\n&#
39;);
});
});
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 &#
39;
electron&#
39;;
import path from &#
39;path&#
39;;
import url from &#
39;url&#
39;;
import
vite from &#
39;
vite&#
39;;
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 === &#
39;development&#
39;) {
win
.loadURL(`http://localhost:
3000`);
} else {
win
.loadURL(
url
.format({
pathname: path
.join(__dirname, &#
39;index
.html&#
39;),
protocol: &#
39;file:&#
39;,
slashes: true,
})
);
}
win
.webConten
ts.openDevTools();
win
.on(&#
39;closed&#
39;, () => {
win = null;
});
}
app
.on(&#
39;ready&#
39;, createWindow);
app
.on(&#
39;window-all-closed&#
39;, () => {
if (process
.platform !== &#
39;darwin&#
39;) {
app
.quit();
}
});
app
.on(&#
39;activate&#
39;, () => {
if (win === null) {
createWindow();
}
});
```
11
. 在`package
.json`中添加以下脚本：
```
"scrip
ts": {
"dev": "cross-env NODE_ENV=development
electron .",
"build": "cross-env NODE_ENV=production
vite build &&
electron .",
"start": "
electron ."
}
```
12
. 运行开发服务器：
```
npm run dev
```
1
3. 运行
Electron应用程序：
```
npm run start
```
这样，你就可以在
Electron应用程序中使用
SQLite3了。在这个示例中，我们创建了一个内存数据库，并插入了10条数据。当用户点击“Fetch Data”按钮时，我们从数据库中检索这些数据，并在屏幕上显示它们。
本文详细介绍了如何在Vite环境下，通过npm和cnpm安装全局包如TypeScript、electron等，配置开发环境，包括eslint、prettier和Sass，并演示了如何使用electron构建跨平台应用，同时涉及SQLite3集成和Sequelize数据库操作。
最低0.47元/天 解锁文章
扫一扫
771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
