下面是一个简单的步骤，帮助你搭建一个基于 Vue3，Vite 和
Electron 的项目。
1. 创建项目文件夹并进入：
```bash
mkdir my-
electron-app
cd my-
electron-app
```
2. 初始化 npm，使用默认设置：
```bash
npm init -y
```
3. 安装依赖：
```bash
npm i
electron vite vue@next
```
4. 创建 Vite 配置文件 `vite.config.js`：
```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
outDir: 'dist/
electron',
emptyOutDir: true,
sourcemap: true,
target: 'chrome90',
minify: false
},
optimizeDeps: {
include: ['
electron-is-dev']
}
})
```
5. 创建入口文件 `main.js`：
```javascript
const { app, BrowserWindow } = require('
electron')
const isDev = require('
electron-is-dev')
let mainWindow
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
const url = isDev ? 'http://localhost:3000' : `file://${__dirname}/index.html`
mainWindow.loadURL(url)
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (mainWindow === null) createWindow()
})
```
6. 创建 `index.html` 文件：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My
Electron App</title>
</head>
<body>
<div id="app"></div>
<script src="./src/main.js"></script>
</body>
</html>
```
7. 创建 Vue 组件 `
HelloWorld.vue`：
```html
<template>
<div class="
hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: '
HelloWorld',
props: {
msg: String
}
}
</script>
<style scoped>
h1 {
font-size: 3em;
text-align: center;
}
</style>
```
8. 在 `src/main.js` 中引入 `
HelloWorld.vue` 并创建 Vue 应用：
```javascript
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
```
9. 创建 `App.vue` 文件并使用 `
HelloWorld` 组件：
```html
<template>
<
HelloWorld msg="Welcome to Your Vue.js +
Electron App" />
</template>
<script>
import
HelloWorld from './components/
HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
```
10. 修改 `package.json` 文件，添加启动命令：
```json
{
"name": "my-
electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"dev": "vite",
"start": "
electron ."
},
"dependencies": {
"
electron": "^13.1.2",
"
electron-is-dev": "^2.0.0",
"vue": "^3.1.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.5.0",
"vite": "^2.4.4"
}
}
```
11. 启动项目：
```bash
npm run dev
```
在另一个终端中打开：
```bash
npm start
```
这样就可以启动一个基于 Vue3，Vite 和
Electron 的项目了。
本文介绍了如何利用Electron和Visual Studio Code（vscode）开发跨平台的桌面应用。首先，解释了Electron是一个基于Chrome和Node.js的框架，允许使用前端技术开发桌面应用。接着，详细步骤包括安装Node.js、vscode，创建项目文件夹，下载并安装Electron，初始化项目，创建主程序入口index.js和主窗体index.html，以及通过gulp运行应用。
最低0.47元/天 解锁文章
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
