前面第一章介绍了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页面来展示用户界面。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。