前端技术发展迅速,各种框架层出不穷,不外乎要借助浏览器去实现渲染。
最近一朋友想让我帮他做个打印机的插件,实现打印特定内容的功能,但又不接受网页的形式,于是技术选型我选择了electron,正好我之前也没玩过electron,就决定搞个桌面端demo试试。
Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。
也就是说,你只要懂前端开发的一些技术,便可以构建开发出跨平台的桌面应用。可以运行于windows、linux、macOS等不同的操作系统。
Electron官网
开发环境为node.js,请至node.js官网安装
笔者使用的是yarn进行安装,其他用户也可以自行选择npm、cnpm等其他包管理工具进行安装
yarn global add electron
因笔者平时接触Vue较多,所以直接选择了electron-vue模版,该模版使用了vue-cli脚手架,webpack配置包括了vue-loader、electron-packager、electron-builder和一些常用的插件,比如vue-router、vuex
因electron-vue使用了vue-cli的脚手架,所以在使用前请确认安装了vue-cli
yarn global add vue-cli
vue init simulatedgreg/electron-vue my-project
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
src文件夹下面分为main和render。
electron中有主进程和渲染进程两个概念,什么是主进程和渲染进程呢?
依笔者的理解为:
渲染进程——(绝大部分情况下)渲染进程指的是html页面
主进程——是指在package.json文件内的 mian字段,而且主进程有且只有一个,本文就是index.js,所以读者也可以认为index.js就是主进程。
而它们就是让网页产生交互行为的关键
我们在开发过程中把主要的精力集中在渲染进程中即可。
然后就是像开发vue项目一样尽情发挥了。
笔者项目中使用了element-ui,如何在项目中使用element-ui?
在渲染进程也就是render文件夹下找到main.js,然后在main.js里引入element-ui。
因笔者demo项目较小,没必要完整引入element-ui,所以项目中选择了按需引入部分element-ui的组件,相关引入方式请戳element-uii 引入方式
同时记得引入element-ui的css文件
import 'element-ui/lib/theme-chalk/index.css';
打包发布有两种方式
"scripts": {
"build": "node .electron-vue/build.js && electron-builder --platform=win32 --arch=ia32",
"win32": "node .electron-vue/build.js && electron-builder --platform=win32 --arch=ia32",
"mac": "node .electron-vue/build.js && electron-builder --platform=drwin ",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"e2e": "npm run pack && mocha test/e2e",
"lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test",
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"test": "npm run unit && npm run e2e",
"unit": "karma start test/unit/karma.conf.js",
"postinstall": "npm run lint:fix"
},
笔者在打包的时候踩了个坑,给其他人引以为鉴。
在打包的时候一直出现打包失败,查了好久,后来发现是文件夹路径里有中文,后来更改之后便可以打包成功了。也给其他人提个醒,在打包时文件夹路径中不要出现中文。