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

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

vue init simulatedgreg/electron-vue my-project

如果你当前使用的是vue-cli3或vue-cli4，那么你需要全局安装vue-cli2：

npm install --global vue-cli

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

npm install

第二步、运行项目

npm run dev

这个时候会报错误:

Unable to install `vue-devtools`

这个时候我们需要手动去安装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

这个时候再报错误：

这个时候我们找到scr/index.ejs文件，将以下结构给删除：

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

npm run dev

这个时候项目已经可以运行起来了，将会打开如下弹窗：

到这里，使用electron-vue搭建electron项目已经完毕。