第一步、使用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
项目已经完毕。