一、环境搭建

// 安装脚手架
npm install -g vue-cli
// 初始化项目
vue init simulatedgreg/electron-vue my-project
// 进入项目
cd my-project
// 安装依赖
yarn 
1
2
3
4
5
6
7
8

上面的项目在初始化时一定要安装Electron，另外安装依赖时也可以 npm install 来安装。

在创建项目的过程中会有一系列的配置，比较烦锁，可以参考如下配置。

二、项目运行

yarn run dev
1

效果如下

三、项目说明

初始化的项目结构与我们平常开发Vue项目结构还是有一定的差别的。主要分为main文件夹与renderer文件夹，其中mian文件夹中存的是主进程的文件，而renderer文件夹中存的是渲染进程文件，项目的大部分代码编写都在此文件夹下完成，如下图所示。

1. 在项目中如何使用Electron

在Electron-Vue中想要使用Electron，可以通过 this.$electron 调用electron中的API。

渲染进程发送数据。

sendMsg(){
    this.$electron.ipcRenderer.send('toMain','我是渲染进程里面的数据')
},
1
2
3
4

主进程接收数据。

// 接收渲染进程广播的数据
var {ipcMain}=require('electron');
 
ipcMain.on('toMain',(event,data)=>{
    console.log(data);
});
1
2
3
4
5
6

2. 在项目中如何使用Node

<script>    
var fs = require('fs');
export default {
    data() {
        return {
            msg: ''
        }
    },
    methods: {
        runNode() {
            fs.readFile('package.json',(err, data) => {
                if (err) {
                    console.log(err);
                    return;
                }
                console.log(data.toString());
            })
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

介绍：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

四、初始化项目踩坑地方

1、安装node-sass时报错，gyp ERR stack Error: Can‘t find Python executable “python“（项目安装使用scss）

第一步，安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

第二部，安装node-sass

cnpm install --save-dev node-sass
1

安装node-sass时可能会出现如下错误：

gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Users\Administrator\Desktop\vueVant\vuevant\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\Administrator\Desktop\vueVant\vuevant\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack     at callback (C:\Users\Administrator\Desktop\vueVant\vuevant\node_modules\graceful-fs\polyfills.js:295:20)
gyp ERR! stack     at FSReqCallback.oncomplete (fs.js:166:21)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "E:\\nodejs-12.16\\node.exe" "C:\\Users\\Administrator\\Desktop\\vueVant\\vuevant\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Administrator\Desktop\vueVant\vuevant\node_modules\node-sass
gyp ERR! node -v v12.16.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
1
2
3
4
5
6
7
8
9
10
11
12

报错如上述问题，安装不成功可能是由于网速或者版本的问题，那么首先你应该卸载之前安装的东西：

npm uninstall node-sass
1

然后重装，或者转而使用淘宝镜像安装。重复以上步骤即可。

或者也可能报如下错误：

Module build failed: Error: ENOENT: no such file or directory, scandir 
'F:\WEB\project\ZhongJun\sgb-management-client\node_modules\_node-sass@4.14.1@node-sass\vendor'
1
2

这时需要使用 npm命令重新编译node-sass，如下：

npm rebuild node-sass
1

2、运行时报错: Unable to install vue-devtools:

请参考：https://blog.csdn.net/stefanie_sun723/article/details/125205561