創建electron_vue工程

https://www.jianshu.com/p/839362c64bdb

Electron

Electron相當於一個瀏覽器的外殼，可以把網頁程序嵌入到殼裏面，可以運行在桌面上的一個程序，可以把網頁打包成一個在桌面運行的程序，通俗來說就是軟件，比如像QQ、優酷、網易音樂等等。功能的強大超出你的想象，可以構建跨平臺桌面程序，本身支持node.js，可以使用node.js的一些模塊。Electron官網

Electron + Vue 聯合使用

安裝Nodejs

安裝成功之後node -v,會顯示版本。

 

node -v

v8.11.1

搭建Vue開發環境

我們直接使用腳手架工具vue-cli
我們在國內的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   是否有測試環境
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
   vue-cli · Generated "YLeMusic".
# Installing project dependencies ...
# ========================

我們到YLeMusic目錄下，之後執行：

 

npm run dev

 I  Your application is running here: http://localhost:8080

我們瀏覽器打開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

所以需要我們增加執行的權限：

 

➜  ~ sudo cnpm install -g electron
Password:
Downloading electron to /usr/local/lib/node_modules/electron_tmp
Copying /usr/local/lib/node_modules/electron_tmp/[email protected]@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/_@[email protected]@@types/node
[2/3] extract-zip@^1.0.3 installed at node_modules/[email protected]@extract-zip
[3/3] electron-download@^4.1.0 installed at node_modules/[email protected]@electron-download
execute post install 1 scripts...
[1/1] scripts.postinstall [email protected] run "node install.js"
[1/1] scripts.postinstall [email protected] 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:
    → [email protected] › [email protected] › 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)
[[email protected]] link /usr/local/bin/electron@ -> /usr/local/lib/node_modules/electron/cli.js

我們看一下是否安裝成功：

 

➜  ~ electron -v
v5.0.6

我們安裝成功了。

創建主程序入口(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);//創建一個窗口
  win.loadURL(`file://${__dirname}/index.html`);//在窗口內要展示的內容index.html 就是打包生成的index.html
  win.webContents.openDevTools();  //開啓調試工具
  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文件夾下執行：

 

electron .

我們就可以看到我們的桌面應用運行起來了。

 

image.png

Electron-vue

使用electron-vue 腳手架工具

vue init simulatedgreg/electron-vue my-project
cd my-project
npm install
npm run dev

 

作者：AlexYangle
鏈接：https://www.jianshu.com/p/839362c64bdb