01、Electron+Vue开发轻量级应用

一、基本环境安装

1. node.js
2. vue -cli 安装
3. yarn 【推荐】

二、搭建electron-vue的脚手架

1. 打开cmd控制台，在目标文件夹下输入安装命令vue init simulatedgreg/electron-vue my-project

# 然后使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue my-project
# 回车后开始安装
? Target directory exists. Continue? Yes
? Application Name my-project
? Application Id com.example.yourapp
? Application Version 0.0.1
? Project description 桌面端应用描述信息
? Use Sass / Scss? Yes
? Select which Vue plugins to install axios, vue-electron, vue-router, vuex, vuex-electron
? Use linting with ESLint? No
? Set up unit testing with Karma + Mocha? No
? Set up end-to-end testing with Spectron + Mocha? No
? What build tool would you like to use? builder
? author susan<***@***.net.cn>

2. 安装依赖

# 安装依赖
cd my-project
yarn # or npm install
# 要装许久……

3. 启动

yarn run dev # or npm run dev

如下图所示安装成功！

image.png

4. 接下来就可以在render文件夹下，以web的开发方式来开发我们的桌面端应用了。

可能遇到的问题
1. ReferenceError: process is not defined

5. 打包

yarn run build # npm run build

当控制台如下所示，表示打包成功了

  ……
 OKAY  take it away `electron-builder`

  • electron-builder version=20.44.4
  • loaded configuration file=package.json ("build" field)
  • writing effective config file=build\builder-effective-config.yaml
  • no native production dependencies
  • packaging       platform=win32 arch=x64 electron=2.0.18 appOutDir=build\win-unpacked
  • building        target=nsis file=build\eialabel Setup 0.0.1.exe archs=x64 oneClick=true perMachine=false
  • building block map blockMapFile=build\eialabel Setup 0.0.1.exe.blockmap
Done in 63.29s.

6. 安装文件说明
   所有的安装文件都在build文件夹下

build
├─ icons # 桌面应用的图标
│  ├─ icon.icon 
│  ├─ icon.icns 
│  └─ 256×256.png
├─ win-unpacked # 免安装文件
│  ├─ …… 
│  └─ my-project.exe # 应用程序的启动文件
├─ builder-effective-config.yaml
├─ eialabel Setup 0.0.1.exe # 安装文件，只拷贝这个文件就可以随意安装了
├─ eialabel Setup 0.0.1.exe.blockmap
├─latest.yml

参考文档

1. Electron-vue开发实战