从0创建一个Vue+Electron项目

从零开始创建 Vue + Electron 项目的完整教程

1. 创建 Vue 项目

使用 Vite 创建 Vue 3 项目

npm create vite@latest my-vue-electron-app --template vue-ts
cd my-vue-electron-app
npm install

2. 添加 Electron 支持

安装必要的依赖

npm install electron --save-dev
npm install vite-plugin-electron --save-dev
npm install electron-builder --save-dev

3. 配置项目结构

创建主进程文件

在 src 目录下创建 electron 文件夹，并添加 main.js：

src/
  electron/
    main.js
  ...

配置 src/electron/main.js

import { app, BrowserWindow } from 'electron'
import path from 'path'
import { fileURLToPath } from 'url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

let mainWindow

async function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  })

  if (process.env.NODE_ENV === 'development') {
    await mainWindow.loadURL('http://localhost:5173')
    mainWindow.webContents.openDevTools()
  } else {
    await mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))
  }
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

4. 修改 Vite 配置

更新 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: 'src/electron/main.js',
    }),
  ],
})

5. 修改 package.json

更新 scripts 部分

"scripts": {
  "dev": "vite",
  "build": "vue-tsc && vite build",
  "preview": "vite preview",
  "electron:dev": "vite && electron .",
  "electron:build": "vite build && electron-builder"
}

添加必要的配置项

"main": "dist-electron/main.js",
"build": {
  "appId": "com.example.myvueelectronapp",
  "productName": "MyVueElectronApp",
  "directories": {
    "output": "release"
  },
  "files": [
    "dist/**/*",
    "dist-electron/**/*"
  ]
}

6. 运行项目

开发模式

npm run electron:dev

这会同时启动：

1. Vite 开发服务器 (Vue 部分)
2. Electron 窗口

生产构建

npm run electron:build

7. 引入Vuetify

https://vuetifyjs.com/zh-Hans/getting-started/installation/#section-73b06709987976ee

8. 安装Vuetify图标库

1. 安装依赖

   npm install vuetify@^3.0 @mdi/font
   

2. 配置 Vuetify (plugins/vuetify.js)

   import { createVuetify } from 'vuetify'
   import { aliases, mdi } from 'vuetify/iconsets/mdi'
   
   export default createVuetify({
     icons: {
       defaultSet: 'mdi',
       aliases,
       sets: { mdi }
     }
   })
   

3. 引入资源 (main.js)

   import { createApp } from 'vue'
   import App from './App.vue'
   import vuetify from './plugins/vuetify'
   import '@mdi/font/css/materialdesignicons.css' // 关键！
   
   createApp(App)
     .use(vuetify)
     .mount('#app')
   

4. 组件中使用图标

   <template>
     <v-btn>
       <v-icon icon="mdi-email" /> 发送邮件
     </v-btn>
   </template>