Electron
electron
是一个使用javascript
为基础的前端技术栈开发跨平台桌面应用的框架,利用这个框架我们可以快速开发多个平台的桌面应用。值得提出的是,electron
是github
开发的。最早运用在atom
编辑器中,后来的微软开发的vs code
也是使用的electron
。
入门感知
electron-quick-start
官方提供了一个快速入门的代码示例。
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
运行上述命令之后,我们可以看到弹出了一个窗体,显示了HelloWorld
。
electron-vue
electron-vue
是社区开源的一套使用vue.js
和electron
开发桌面应用的技术方案。
使用
vue init simulatedgreg/electron-vue electron-vue-demo
cd electron-vue-demo
cnpm install
cnpm run dev
运行起来之后,会启动一个应用窗口。
分析项目的目录结构,是一个非常标准的vue.js
项目,集成了vue-router
,vuex
生态库。
我们尝试修改代码:
- 删除
components
下的目录及文件,新建Home.vue
- router index.js 做相应修改
再次启动后,可以看到修改后Home.vue
中的内容。
打包
尝试在mac OS
平台上生成应用的dmg
文件。
非常简单,使用如下命令:
cnpm run build
在build
文件夹中,可以看到electron-vue-demo-0.0.0.dmg
。
在mac OS
可以按照正常步骤按照这个dmg
。