如何使用electron-vue搭建electron项目

本文档详细介绍了如何使用vue-cli2构建electron-vue项目,并解决在项目运行过程中遇到的vue-devtools安装错误。通过手动安装vue-devtools、修改index.dev.js文件以及删除不必要的代码段,成功运行项目并展示弹窗。步骤包括项目初始化、依赖安装、错误处理及最终运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一步、使用vue-cli2构建模板项目

vue init simulatedgreg/electron-vue my-project

如果你当前使用的是vue-cli3vue-cli4,那么你需要全局安装vue-cli2

npm install --global vue-cli

当模板现在完毕后,根据提示一步一步进行下去。当模板完全构建完毕后,进行依赖安装:

npm install

第二步、运行项目

npm run dev

这个时候会报错误:

Unable to install `vue-devtools`

image.png
这个时候我们需要手动去安装vue-devtools:

npm install vue-devtools --save-dev

同时修改index.dev.js

* This file is used specifically and only for development. It installs
 * `electron-debug` & `vue-devtools`. There shouldn't be any need to
 *  modify this file, but it can be used to extend your development
 *  environment.
 */

/* eslint-disable */
import { BrowserWindow } from 'electron' // 增加
// Install `electron-debug` with `devtron`
require('electron-debug')({ showDevTools: true })

// Install `vue-devtools`
// 增加async
require('electron').app.on('ready', async () => {
  // 注释
  // let installExtension = require('electron-devtools-installer')
  // installExtension.default(installExtension.VUEJS_DEVTOOLS)
  //   .then(() => { })
  //   .catch(err => {
  //     console.log('Unable to install `vue-devtools`: \n', err)
  //   })
  // 新增
  await new BrowserWindow.addDevToolsExtension(
    "node_modules/vue-devtools/vender"
  );
})

// Require `main` process to boot app
require('./index')

通过这个步骤后可以解决因为网咯问题无法安装vue-devtools的问题。

第三步、再次运行项目

npm run dev

这个时候再报错误:
image.png
这个时候我们找到scr/index.ejs文件,将以下结构给删除:
image.png

第四步、最后一次运行项目

npm run dev

这个时候项目已经可以运行起来了,将会打开如下弹窗:
image.png
到这里,使用electron-vue搭建electron项目已经完毕。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值