抖音上看了一个前端工程师写的一个桌面程序,于是心血来潮自己也研究了一下,学习成果粘一波,electron有点类型Hybrid App开发,套壳 + H5,嗯~我是这么理解的~
安装及运行
安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
what build tool would you like to use?
electron-packer(打包出不同平台的文件夹,不同的平台需要不同的系统来打包,我选的这个~)
electron-builder(打包出安装包,但是默认安装在C盘,需要自定义路径的话还需要其他的工具)
安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev
打包
package.json 的 scripts内有各种平台的打包命令,我的是在 Windows 上运行,所以 npm run build:win32 就会在项目的build 文件夹下生成一个应用程序,其他系统以此类推,下面是打包之后运行的脚本,卧槽,看起来很吊的样子。
electron-vue 脚手架最大好处就是我们不要在 vue 项目里手动配置 electron 了,极好的融合了 vue-cli+electron,主要业务逻辑都放在了src->renderer文件夹内去,和之前的 vue-cli 搭建项目可以说是没有任何区别
今天大概是了解一下环境配置什么的,下次想写东西的时候再更深入的研究下,嘻嘻~
参考文档
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/getting_started.html