Electron
Electron相當于一個瀏覽器的外殼,可以把網(wǎng)頁程序嵌入到殼里面,可以運行在桌面上的一個程序,可以把網(wǎng)頁打包成一個在桌面運行的程序,通俗來說就是軟件,比如像QQ、優(yōu)酷、網(wǎng)易音樂等等。功能的強大超出你的想象,可以構建跨平臺桌面程序,本身支持node.js,可以使用node.js的一些模塊。Electron官網(wǎng)
Electron + Vue 聯(lián)合使用
安裝Nodejs
安裝成功之后node -v
,會顯示版本。
node -v
v8.11.1
搭建Vue開發(fā)環(huán)境
我們直接使用腳手架工具vue-cli
我們在國內(nèi)的npm非常慢,所以我們需要重新設置npm鏡像,我設置的是淘寶的鏡像
npm config set registry https://registry.npm.taobao.org/
我們可以看一下鏡像地址是:
? vue npm config get registry
https://registry.npm.taobao.org/
我們安裝腳手架工具:
npm install --global vue-cli
我們安裝web-pack:
npm install -g webpack
搭建vue項目
我們搭建項目:
vue init webpack YLeMusic
? Project name ylemusic 項目名稱
? Project description music 項目描述
? Author YLe 作者
? Vue build standalone
? Install vue-router? Yes 是否需要路由
? Use ESLint to lint your code? No 是否需要語法檢測
? Set up unit tests No 是否有test 工程
? Setup e2e tests with Nightwatch? No 是否有測試環(huán)境
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
vue-cli · Generated "YLeMusic".
# Installing project dependencies ...
# ========================
我們到YLeMusic
目錄下,之后執(zhí)行:
npm run dev
I Your application is running here: http://localhost:8080
我們?yōu)g覽器打開http://localhost:8080
此時顯示的是
image.png
安裝Electron
npm install electron
我使用npm 能安裝,我測試了好像可以只能使用cnpm,所以需要先安裝cnpm。
npm install -g cnpm --registry=https://registry.npm.taobao.org
//輸入命令,查看是否安裝成功
cnpm
使用cnpm安裝Electron
? ~ cnpm install -g electron
Downloading electron to /usr/local/lib/node_modules/electron_tmp
Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/electron_tmp'
npminstall version: 3.11.0
npminstall args: /usr/local/bin/node /usr/local/lib/node_modules/cnpm/node_modules/npminstall/bin/install.js --fix-bug-versions --china --userconfig=/Users/yanglele/.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://registry.npm.taobao.org -g electron
所以需要我們增加執(zhí)行的權限:
? ~ sudo cnpm install -g electron
Password:
Downloading electron to /usr/local/lib/node_modules/electron_tmp
Copying /usr/local/lib/node_modules/electron_tmp/_electron@5.0.6@electron to /usr/local/lib/node_modules/electron
Installing electron's dependencies to /usr/local/lib/node_modules/electron/node_modules
[1/3] @types/node@^10.12.18 installed at node_modules/_@types_node@10.14.10@@types/node
[2/3] extract-zip@^1.0.3 installed at node_modules/_extract-zip@1.6.7@extract-zip
[3/3] electron-download@^4.1.0 installed at node_modules/_electron-download@4.1.1@electron-download
execute post install 1 scripts...
[1/1] scripts.postinstall electron@5.0.6 run "node install.js"
[1/1] scripts.postinstall electron@5.0.6 finished in 4s
Recently updated (since 2019-06-20): 2 packages (detail see file /usr/local/lib/node_modules/electron/node_modules/.recently_updates.txt)
Today:
→ electron-download@4.1.1 ? fs-extra@4.0.3 ? graceful-fs@^4.1.2(4.2.0) (03:39:25)
2019-06-22
→ @types/node@^10.12.18(10.14.10) (05:24:02)
All packages installed (141 packages installed from npm registry, used 8s(network 4s), speed 419.11kB/s, json 132(249.29kB), tarball 1.55MB)
[electron@5.0.6] link /usr/local/bin/electron@ -> /usr/local/lib/node_modules/electron/cli.js
我們看一下是否安裝成功:
? ~ electron -v
v5.0.6
我們安裝成功了。
創(chuàng)建主程序入口(main.js)和配置文件 package.json
main.js
const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
width:800,
height:600
};//窗口配置程序運行窗口的大小
function createWindow(){
win = new BrowserWindow(windowConfig);//創(chuàng)建一個窗口
win.loadURL(`file://${__dirname}/index.html`);//在窗口內(nèi)要展示的內(nèi)容index.html 就是打包生成的index.html
win.webContents.openDevTools(); //開啟調(diào)試工具
win.on('close',() => {
//回收BrowserWindow對象
win = null;
});
win.on('resize',() => {
win.reload();
})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win == null){
createWindow();
}
});
package.json
{
"name": "ylemusic",
"productName": "ylemusic",
"author": "Yle",
"version": "1.0.0",
"main": "main.js",//主文件入口
"description": "music",
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"electronVersion": "1.8.4",
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "ylemusic",
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {
"artifactName": "demo-${version}-${arch}.${ext}"
}
},
"dependencies": {
"core-js": "^2.4.1",
"electron-builder": "^20.44.4",
"electron-package": "^0.1.0",
"electron-updater": "^2.22.1"
}
}
- 這個package.json 文件可能還需要進一步研究一下,怎么配置。
之后我們再dist文件夾下執(zhí)行:
electron .
我們就可以看到我們的桌面應用運行起來了。
image.png
Electron-vue
使用electron-vue 腳手架工具
vue init simulatedgreg/electron-vue my-project
cd my-project
npm install
npm run dev