什么是electron

electron是基于JavaScript、html和css的桌面应用开发框架，Electron兼容Mac、Windows和Linux，具体的在此不去过多赘述，想要了解详情的可以自己查看electron官方文档

---

如何搭建框架

注：本文示例是用的技术是vue（脚手架使用vue-cli3 + js+electron

1.新项目搭建

（1）需要确定本地是否安装好node环境，如有请跳过本小段

在cmd中输入node -V 和vue -V
没有的话可以安装node 和安装vue-cli3
（2）安装好环境之后可以开始创建项目

vue create test-project

这里会跳出选择配置的选项，直接选择默认的配置即可，需要其他的配置也可以选择自行设置，或者默认配置创建之后自行添加

创建成功之后先执行下面的命令，进入该文件夹下

cd test-project

这样就使用脚手架初始化项目成功，可以执行下面的命令验证

npm run serve

（3）接下来就使用命令添加electron的生成器

vue add electron-builder

会有一个版本的选择，选择最新的即可，然后这里可能需要的时间会稍微久一点，我这里用了半分钟左右，就安装成功
（4）安装成功，运行和打包

npm run electron:serve

这里执行的时候可能会有下面的情况

这里可能需要等待一会才能执行结束，这里是由于vue electron 下载Vue-devtools ChromeExtension扩展失败，这个不影响项目进行的，可以不必在乎，打包是正常的。

npm run electron:build

打包执行以上代码之后，项目会生成dist_electron文件夹




这就是成功执行之后的结果，到这里就算全部完成了。

2.已有项目添加桌面应用打包

已有项目需要添加桌面应用打包只需要从上面的（3）开始操作即可。

项目搭建中可能遇到的问题：

1. 当项目中有使用到element或者iview等ui框架时，icon可能会加载失败，是应为他们使用的是字体图标，加载会存在问题，这时候需要在项目生成的vue.config.js中添加配置即可
   

2. 项目中使用到了vue-router的时候，如果页面加载不出来，有可能是因为路由模式不对，在router文件夹下的index.js的文件中设置路由为hash模式，history路由会存在问题。
   

---

这些就是我在开发桌面应用的过程中，所有的经验与碰到的问题了，希望可以对大家有所帮助，如果有其他问题可以提问，大家也可以互相学习。