vue3+electron开发桌面软件入门与实战（0）——创建electron应用
electron系列文章目录
- vue3+electron开发桌面软件入门与实战（0）——创建electron应用
- vue3+electron开发桌面软件入门与实战（1）——创建electron+vue3主体项目
-
- vue3+electron开发桌面软件入门与实战（2）——创建electron+vue3框架打包集成
严格按照本系列教程学习与搭建项目，最终一定会得到一个完整的项目。并且会对搭建过程中的知识点、问题解决思路有更深刻的认识。
下载
你说学个新技能不看官网，不就相当于练葵花宝典不自宫吗。
第一次接触electron，请移步官网：https://www.electronjs.org/zh/docs/latest，通读全文，不用知道它都有什么，只要明白它是什么，能解决什么即可。
第一次接触electron打包，请移步官网：https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution，使用electron-forge，不是因为它有多好，而是因为它够简单。
第一次考虑落地，请使用electron-builder打包，没有原因，因为我用的它。不用它，你就只能自行研究vue3+vite+electron如何混合打包。
看到这里的童鞋，大概率已经失去第一次了。
下面是正经时间，零基础创建第一个electron项目的正确姿势：
找到自己平时敲代码的目录，创建个文件夹，叫啥名随意，我的项目命名为：electron-vue-basic
然后进入这个文件夹，打开cmd，输入：
npm init
维护自己项目的基本信息。不要看见命令行就害怕，这里你就瞎鸡儿写，这就是个快捷创建package.json的命令，写错了，咱再去改package.json就行。当然，还是建议好好写自己信息，万一以后你的软件日活过亿呢，人家一看作者叫“瞎鸡儿写的”，貌似不太和谐。
下面开始初始化项目，介绍快捷进入cmd命令界面的方式：
- 第一步，打开自己的文件夹。因为我已经创建过完整的electron-vue-basic项目，所以这里用electron-vue-basicc代替演示，以后本系列文章不再提示，自行脑补替换。
- 第二步，在地址栏输入cmd：
- 第三步，点回车，打开命令行，输入npm init
按提示，输入项目信息，我一路enter键过去了。
这时候，你的项目里应该只有一个package.json文件，打开它，就是刚才维护的信息。如图：
可以先不用管里面的信息，配置运行项目的时候会介绍主要的几个参数。
- 最后一步，在刚才的cmd命令行界面，下载electron。这里要看清楚了，当前所在命令目录对不对。
如果都没问题，输入命令：
npm install electron --save-dev
下载一般不会有问题吧，npm不成功，你就yarn，yarn不成功，你就nrm管理镜像地址，啥都不成，要不你就看看是不是网络有问题，或者不用检查了，不管台式还是笔记本，都直接用电脑连接手机流量，妥妥能成。
如果你真的很悲催，下载都报错，如图：
上半部分下载electron报错，是用公司墙过的网，报错关键信息如下：
npm ERR! code 1
npm ERR! path D:\cnde\electron-vue-basicc\node_modules\electron
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm ERR! RequestError: unable to verify the first certificate
切手机流量后重新下载，下载成功。然后你的项目目录就进化成这个样子：
初始化
下载完毕后，并成功获得经验大礼包——electron项目，就可以进行初始化并运行了。
首先用自己习惯的IDE打开项目，我用的webstorm（工具都是浮云，不过还是不建议使用记事本编程）：
这里就要开始配置我们的package.json了，
"name": "electron-vue-basic",
"private": true,
"version": "1.0.0",
"type": "commonjs",
"main": "electron/main/main.js",
"description": "electron+vite+vue3+electon-builder demo",
"author": "中二少年学编程 ",
"license": "MIT",
"scripts": {
"start": "electron ."
},
……
排好队一个个介绍：
- name：项目名称。
- private：是否允许发布，设置为true后，npm会拒绝发布它，看自己情况，建议把隐私信息去掉后，删掉这个参数，毕竟有人借鉴自己的demo，也是一种幸福。
- version：项目的版本号
- type：这个必须写commonjs，采用nodejs的commonjs模块化语法，就是request那套。因为electron是基于node的，不写运行会报错。如果因为特殊情况，实在不能写，可以找插件，或者有commonjs要求的js文件后缀明确标明cjs。
- main：入口文件，在理解不深入之前，建议直接抄我的配置，并且后续文档目录先严格按照我的项目来构建。
- description：介绍自己的项目，话说不写的话会打包失败？我没去尝试，写上就好，随便写。
- author：作者名，真实项目中建议不要写这么二的名字，容易社死。
- license：开源协议。
- scripts：项目运行命令。
配置完成后，长这个样子：
做完这些，配置已经完成。我们来检验一下electron的环境有没有搭建好，入口文件能不能跑通。
这里需要注意，我的入口文件配置是：
"main": "electron/main/main.js",
如果按照这个配置，那么应该在根目录下创建文档结构：electron/main/main.js，如果是按照官网的配置，则只需要在和package.json同级的根目录，创建main.js文件。
按照我的目录结构创建main.js：
main.js中没有任何代码，只有一句“hello world”
写好后，在终端执行命令“npm run start”或者“yarn start”。如果成功打印“hello world”，说明基础项目运行成功，如图：
