electron+vue框架搭建桌面应用

electron+vue相关文档：

https://github.com/SimulatedGREG/electron-vue
electron+vue官方文档：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

一、electron+vue是什么

electron+vue 是一个结合 vue-cli 与 electron 的项目，主要避免了使用 vue 手动建立起 electron 应用程序，该程序包含了 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等的脚手架。

二、electron+vue搭建

在构建之前，请确保自己环境是否已配置好，若没有配置，请自行配置相关环境。

可以使用yarn安装或npm安装electron+vue。yarn安装会比npm快。

若没安装yarn，请安装yarn（yarn）：https://yarnpkg.com/zh-Hans/docs/install#windows-stable

window小伙伴在安装electron+vue时会报错，所以，在安装之前，请先安装相关windows-build-tools。

这里注意安装windows-build-tools时，一定要以管理身份打开cmd命令提示符,然后输入以下yarn global add windows-build-tools或npm install --global windows-build-tools

这样才能安装成功。若不以管理身份打开cmd命令提示符安装会出现如下图错误：

image.png

npm的安装命令

npm install --global windows-build-tools

yarn安装命令

yarn global add windows-build-tools

建立一个名为my-project的electron+vue项目

npm install -g vue-cli

vue init simulatedgreg/electron-vue my-project

[图片上传失败...(image-333e6-1563193116486)]

image.png

安装依赖并运行你的程序

cd my-project

yarn # 或者 npm install

yarn run dev # 或者 npm run dev

image.png

输入yarn run dev

[图片上传失败...(image-1511d9-1563193116486)]

image.png

界面图：

image.png

代码文件目录官网介绍：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/file-tree.html

image.png

将项目打包,这个打包过程可能需要安装其他东西，所以等待时间会很长，我就打包了差不多近1小时

yarn run dev

image.png