electron-vue初始化项目到打包运行

electron与vue相结合的方式有多种，你可以在vue项目中安装electron依赖并编写启动electron的脚本及代码，也可以在electron项目中安装vue的依赖使两者结合。（也可以将vue换成react项目）
但你要知道，大众都在用electron和vue进行开发的时候，这时候肯定会有electron和vue的结合体给大家使用。

介绍

Electron-vue就是基于 vue来构造 electron 应用程序的样板代码。electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex、axios 等等。

初始化项目

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev
1
2
3
4
5
6
7
8

这个项目初始完之后，查看一下项目结构。只是在src目录下多了个main文件夹和renderer文件夹。这里就是存放项目源码的位置。mian文件夹下存放着主进程的代码，也就是electron的代码。renderer下存放着渲染进程的代码，也就是vue项目的代码。

运行之后是这个样子，这里我把菜单栏进行了隐藏。
隐藏方式：主进程中引入Menu模块，并在createWindow中设置Menu.setApplicationMenu(null)

开发的方便之处

如果是自己搭建的electron和vue的项目，如何快速运行此项目？如何快速打包此项目？你需要学会如何在vue中使用electron的API，如何在渲染进程中调用主进程的方法。渲染进程何如与主进程之间进行通信等等。

运行：

自己搭建的话需要运行了vue， 再运行electron，然后electron加载vue项目。
那使用了electron-vue脚手架创建的项目后，你直接在命令行输入npm run dev即可运行。

打包：

打包方面就需要先将vue项目打包成html、js、css，然后再打包electron项目。参考了网上对electron-vue项目的多种打包方式，都觉得很麻烦，于是就自己写一行脚本来进行打包。
安装electron-packager依赖：

npm install --save-dev electron-packager
1

接着在package.json中的scripts里编写

"packager:win": "electron-packager . illustration --platform=win32 --arch=x64 --icon=./build/icons/icon.ico --out=./dist/electron/win32 --overwrite",
"packager:linux": "electron-packager . illustration --platform=linux --arch=arm64 --icon=./build/icons/icon.ico --out=./dist/electron/linux --overwrite"
1
2

对应平台输入不同的命令，Mac平台同理。不过icon要换一下，换成icns后缀的图标。

在vue中使用electron的API

在这个项目中，集成的有vue-electron依赖，它将 electron API 附加到 Vue 对象的 vue 插件，使所有组件可以访问它们。
一个可以轻松通过 this.$electron 访问 electron API 的简单的 vue 插件，不再需要将 electron 导入到每一个组件中。

这个项目大概就这些了，有其他疑问的小伙伴可留言。