创建vue+electron项目流程

复制代码
一个vue3和electron最基本的环境搭建步骤如下:

// 安装 vite + vue3
npm create vue@latest

// 安装electron,然后在根目录下创建main.js文件, package.json也要配置main:main.js
npm i electron -D

// 安装nodemon, 监听js css html vue文件发生变化后重新渲染,然后配置package.json
npm i nodemon -D

"scripts": {
    "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
}

// 安装electron-win-state,记录窗口停留的位置
npm i electron-win-state -D

// 创建preload文件夹,创建一个index.js

// 完善一下官网的案例
app.whenReady().then(() => {
    createWindow()
    
    app.on('activate', () => {
        // const {BrowserWindow} = require('electron')
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

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

具体项目信息查看本地上传的资源, 这里就的代码只拷贝一部分比较重要的

复制代码
// main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')

const WinState = require('electron-win-state').default

function createWindow() {
    const winState = new WinState({
        defaultWidth: 1000,
        defaultHeight: 800
    })
    const win = new BrowserWindow({
        ...winState.winOptions,
        webPreferences: {
            preload: path.resolve(__dirname, 'preload/index.js'),
            sandbox: false
        },
    })

    win.loadURL('http://localhost:5173')

    winState.manage(win)
}

app.whenReady().then(() => {
    createWindow();

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

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


// package.json
{
  "name": "readit",
  "version": "0.0.0",
  "description": "first electron app",
  "private": true,
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
  },
  "dependencies": {
    "vue": "^3.5.12"
  },
  "devDependencies": {
    "@tsconfig/node22": "^22.0.0",
    "@types/node": "^22.9.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vue/tsconfig": "^0.5.1",
    "electron": "^33.2.0",
    "electron-win-state": "^1.1.22",
    "nodemon": "^3.1.7",
    "npm-run-all2": "^7.0.1",
    "typescript": "~5.6.3",
    "vite": "^5.4.10",
    "vite-plugin-vue-devtools": "^7.5.4",
    "vue-tsc": "^2.1.10"
  }
}


// index.html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 去掉窗口的Content-Security-Policy警告,告诉该页面的内容是使用本地的 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
相关推荐
Gracemark1 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼1 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_1 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing1 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工2 天前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码2 天前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp19942 天前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
_AaronWong2 天前
实现 Electron 资源下载与更新:实时进度监控
前端·electron
森林的尽头是阳光2 天前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥2 天前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计