從0到1使用vue+electron構建本身的桌面端微信(一)

時間 2019-11-21

標籤使用 vue+electron vue electron 構建本身桌面微信简体版

原文原文鏈接

關於electron

官方定義:Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術建立原生程序的框架,它負責比較難搞的部分,你只需把精力放在你的應用的核心上便可. 簡單的說既爲使用前端HTML,CSS,JS+Node.js+chrome瀏覽器內核構建的跨平臺桌面端應用,你只須要關注頁面邏輯的實現,便可快速構建跨平臺桌面應用前端

小白入門,大神請略過哈

1 安裝

1.首先固然是安裝咱們的老朋友vue(請主動升級爲vue-cli3.x)

vue create pc

//啓動項目,看是否能夠正常跑起來
npm run serve
複製代碼

我以爲仍是是不選Linter的好哈,我的見解 vue

我習慣了less,我的隨意哈,不裝也能夠

2.沒毛病?那咱們進行下一步,安裝electron的vue插件

vue add vue-cli-plugin-electron-builder   //推薦安裝方式,具體爲啥? 不着
複製代碼

有關介紹,請關注 www.npmjs.com/package/vue… 這一步安裝會很是慢,且可能安裝失敗,多試幾回啦,而且這一步會改變咱們的目錄結構哈chrome

這一步請選擇6.0.0,爲啥? 舊不如新嘛.哈哈

安裝完成之後,以下圖,表示安裝成功由於是裝過了,全部成這樣子了,哈哈,只要不報錯,既表明安裝成功 vue-cli

3.接下來運行咱們的項目吧?

yarn electron:serve
複製代碼

哈哈,很是好,已經能夠正常的跑起來了

4.試着打包一下?

yarn electron:build
複製代碼

打包結果:npm

通常在不進行任何配置的狀況下,打包完自動存在dist_electron文件夾下,默認名字爲pc setup 0.1.0json

5.安裝一下吧?

雙擊打開

嗯你已經成功的運行並打包生成桌面端了瀏覽器

2 安裝配置

通過第一步,雖然能夠打包完成一個桌面端應用了,但你會發現你打包的應用雙擊安裝後,不會讓你作任何自定義安裝選擇,既進行看快速安裝服務,這樣是很不任性化的,下面咱們進行自定義的安裝配置:bash

在根目錄新建 vue.config.js,也就是俗稱的vue 的配置文件,內容以下(功能請看註釋)微信

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.example.app",  //ID 不用解釋吧?
                "productName":"APP",//項目名，也是生成的安裝文件名，即aDemo.exe
                "copyright":"Copyright © 2019",//版權信息
                "directories":{
                    "output":"./dist"//打包後的輸出文件路徑
                },
                "win":{//win相關配置
                    "icon":"./favicon.ico",//圖標，當前圖標在根目錄下，注意這裏有個坑
                    "target": [
                        {
                            "target": "nsis",//利用nsis製做安裝程序
                            "arch": [
                                "x64"//64位
                            ]
                        }
                    ]
                },
                "nsis": {
                    "oneClick": false, // 是否一鍵安裝
                    "allowElevation": true, // 容許請求提高。 若是爲false，則用戶必須使用提高的權限從新啓動安裝程序。
                    "allowToChangeInstallationDirectory": true, // 容許修改安裝目錄
                    "installerIcon": "./favicon.ico",// 安裝圖標
                    "uninstallerIcon": "./favicon.ico",//卸載圖標
                    "installerHeaderIcon": "./favicon.ico", // 安裝時頭部圖標
                    "createDesktopShortcut": true, // 建立桌面圖標
                    "createStartMenuShortcut": true,// 建立開始菜單圖標
                    "shortcutName": "APP", // 圖標名稱(也就是應用建立後的桌面快捷方式名稱)
                },
                }
            }

    }
}
複製代碼