下面是一个使用
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”按钮时，我们从数据库中检索这些数据，并在屏幕上显示它们。
本文介绍了在Vue2项目中配置.env文件的方法，包括在webpack和Vite构建下的不同之处。在webpack下使用VUE_APP前缀，而在Vite中则需使用VITE前缀。还提到了process.env报错时可能需要安装@type/node以及在vite.env.d.ts中手动声明环境变量的问题，尽管有时即使不声明也能正常工作。
1051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
