一、基本環(huán)境安裝
- node.js
- vue -cli 安裝
- yarn 【推薦】
二用狱、搭建electron-vue的腳手架
- 打開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>
- 安裝依賴
# 安裝依賴
cd my-project
yarn # or npm install
# 要裝許久……
- 啟動
yarn run dev # or npm run dev
如下圖所示安裝成功！
image.png
- 接下來就可以在
render文件夾下夏伊，以web的開發(fā)方式來開發(fā)我們的桌面端應用了摇展。
- 打包
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.
- 安裝文件說明
所有的安裝文件都在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
