electron-实战浅谈二

前面第一章介绍了 electron 的概念以及作用，这章我分享实战相关的代码，对于前端应用来说，最重要的还是要看 Electron 和三个框架相结合再来进行应用的研发，本章我主要分享如何将三大框架之一和 electron 结合之后进行研发，我这里的技术选型是 vuecli

首先，我们先按照传统步骤，建立一个 vuecli 初始化应用。

vue create electron-vue-demo

Vue CLI v3.8.4
? Please pick a preset: (Use arrow keys)
  default (babel, eslint) 
> Manually select features 

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n)  n

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
❯ Stylus 

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier 

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files 
❯ In package.json 

? Save this as a preset for future projects? (y/N) N

以上这些步骤就是我创建的一些配置，主要是一些常用模块，各位可自行参考配置自己的项目。

配置好了之后接下来就是让项目支持 electron，其实很简单，首先

vue add electron-builder

接下来出现配置选项：

? Choose Electron Version (Use arrow keys)
  ^7.0.0 
  ^8.0.0 
❯ ^9.0.0

安装过程中，很自动在 src 文件夹下多了 background.js 主进程代码，然后我们的 package.json 也出现了变化

最后我们执行 npm run electron:serve 就可以看到

大家注意，Electron 运行 package.json 的 main 脚本（background.js）的进程就是主进程。在主进程中运行的脚本通过创建 web 页面来展示用户界面。