Electron-vue跨平台桌面应用开发实战教程（一）——HelloWorld

本文将带领你使用vue-cli+electron-builder搭建一个HelloWorldElectron是基于Chromium和Node.js的，你可以使用HTML、CSS和JavaScript构建跨平台应用程序的技术框架，兼容Mac、Windows和Linux。在开始构建项目之前，需要安装以下工具node.js1创建项目1.1安装vue-cli首先查看是否安装了vue-cli，vue-cli的版本是多少vue-V如果是旧版本，可以直接卸载，然后安装最新版本卸载npmuninstallvue-cli-ginstallinstall@vue/cli-g1.2使用vue-cli创建项目选择项目存放路径，然后开始创建一个项目例如：vuecreateelectron-vue-helloworld这里将项目名称为：electron-vue-helloworld输入上面的命令后，进入vue项目的创建过程。下面出现VueCLIv3.8.4？Pleasepickapreset:(Usearrowkeys)default(babel,eslint)>Manuallyselectfeatures第一个选项是“default”默认，只包含babel和eslint第二个选项是“Manuallyselectfeatures”Custominstallation选择custominstallation,go到下一步选择？检查项目所需的功能：（按选择，切换所有，反转选择）??Babel?TypeScript?ProgressiveWebApp(PWA)Support?Router?Vuex?CSSPre-processors?Linter/Formatter?UnitTesting?E2ETesting这里我们选择babel（高级语法转低级语法）Router（路由）Vuex（状态管理器）CSSPre-processors（css预处理器）Linter/Formatter(codestyle,formatverification)andthengotonextstep?Usehistorymodeforrouter?(Requiresproperserversetupforindexfallbackinproduction)(Y/n)n这一步是设置路由器是否使用historymode，这里我们选择n，然后进入下一步?选择一个CSSpre-processor(PostCSS,AutoprefixerandCSSModulesaredefaultsupported):(Usearrowkeys)Sass/SCSS(withdart-sass)Sass/SCSS(withnode-sass)Less?Stylus这里是设置css预处理模块，这里我要强调的是不用乱选，选我们熟悉的类型，这里我们选择Stylus，然后进行下一步？Pickalinter/formatterconfig:(Usearrowkeys)ESLintwitherrorpreventiononlyESLint+Airbnbconfig?ESLint+StandardconfigESLint+Prettier这一步是选择ESLint代码检查工具这里我们选择标准配置“ESLint+Standardconfig”，然后进行下一步？Pickadditionallintfeatures:(Presstoselect,totoggleall,toinvertselection)??Lintonsave?Lintandfixoncommit这一步是选择何时执行ESLint检查，这里我们在保存的时候选择勾选“Lintonsave”，然后进行下一步？您更喜欢将Babel、PostCSS、ESLint等的配置放在哪里？Indedicatedconfigfiles?Inpackage.json这一步是询问babel、postcss、eslint这些配置是单独的配置文件还是放在package.json文件中，这里我们选择“Inpackage.json”，然后去下一步？将其保存为未来项目的预设？(y/N)N这一步是询问以后创建项目时是否使用相同的配置。这里我们选择N至此，vue项目已经创建完成。我们等待项目下载依赖包。项目搭建完成后，我们开始集成electron1.3，使用electron-builder将electron集成到项目根目录下（electron-vue-helloworld），然后执行如下命令：vueaddelectron-builder会安装electron的依赖此时的electron-builder，可能比较耗时，请耐心等待，安装完成后会出现如下选择：?ChooseElectronVersion(Usearrowkeys)^4.0.0^5.0.0?^6.0.0这一步是选择Electron的版本。这里我们选择最新的6.0.0版本，等待安装完成。安装完成后会在src目录下生成background.js，在package.json文件中将main改为"main":"background.js"。至此，所有的安装都已经完成，接下来我们可以运行程序看看是否有效。1.4运行程序执行如下命令，运行程序npmrunelectron:serve启动时会启动很长时间，会出现如下信息INFOLaunchingElectron...Failedtofetchextension,trying4moreFailedtofetchextension,trying3moretimesFailedtofetchextension,trying2moretimesFailedtofetchextension,trying1more这是安装vuejsdevtools，由于网络问题一直无法安装。重试5次后，将自动跳过并启动程序。编译成功后，会自动弹出一个桌面程序，如下图。下一期我们会详细说说background.js，里面的一些参数是干什么用的。更多内容请关注公众号