我欲封天txt下载,性爱有声小说在线收听

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

運(yùn)用Electron+Vue3.2+TypeScript+Vite開發(fā)桌面端

Electron可以讓程序員重用Web的代碼，使用HTML、CSS、JavaScript來(lái)構(gòu)建桌面應(yīng)用，并在不同平臺(tái)上使用。

創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元雄縣做網(wǎng)站,已為上家服務(wù),為雄縣各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

Electron官網(wǎng)上說(shuō)：“比你想象的更簡(jiǎn)單”————“如果你可以建一個(gè)網(wǎng)站，你就可以建一個(gè)桌面應(yīng)用程序。 Electron 是一個(gè)使用 JavaScript, HTML 和 CSS 等 Web 技術(shù)創(chuàng)建原生程序的框架，它負(fù)責(zé)比較難搞的部分，你只需把精力放在你的應(yīng)用的核心上即可?！?/p>

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。目前 Vue 已經(jīng)成為繼 Rect 之后最流行的前端開發(fā)框架。

我找到了一個(gè)插件：vite-plugin-electron，可以很方便的幫我們把 electron 和 vue 結(jié)合起來(lái)，開發(fā)起來(lái)非常方便。

目錄結(jié)構(gòu)設(shè)計(jì)

因?yàn)槲覀冃枰褂?Electron 和 vue 進(jìn)行開發(fā)，因此我們把它們分開目錄存儲(chǔ)，基礎(chǔ)目錄結(jié)構(gòu)如下：

electron-main：主進(jìn)程目錄。
electron-preload：預(yù)加載代碼目錄，主要是定義橋接通信。
其他文件：也就是 vue 初始化后的目錄。

目錄結(jié)構(gòu)這么設(shè)計(jì)的原因是因?yàn)槲覀兪褂玫?vite-plugin-electron 插件需要使用這樣的目錄結(jié)構(gòu)，目前還沒有提供設(shè)置修改。

初始化項(xiàng)目目錄

下面就開始初始項(xiàng)目：

yarn create vite electron-desktop --template vue-ts

先使用 vite 創(chuàng)建 vue 項(xiàng)目，然后我們?cè)賹?electron 嵌入到里面。

初始化完成后，我們先做一個(gè)本地 yarn 源的配置，防止下載庫(kù)的時(shí)候出現(xiàn)異常。

配置.yarnrc

registry "https://registry.npm.taobao.org/"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror "http://npm.taobao.org/mirrors/electron-builder-binaries/"

配置完下載源后，就可以安裝 electron 了。

安裝Electron

yarn add -D electron electron-builder rimraf vite-plugin-electron electron-devtools-installer

electron-builder：打包工具。
rimraf：快速刪除文件或目錄工具。
vite-plugin-electron：vite 結(jié)合 electron 的庫(kù)，關(guān)于這個(gè)插件可以參見 Vite 與 Electron 無(wú)縫銜接。
electron-devtools-installer：electron 開發(fā)工具。

vite-plugin-electron 插件是將 vite 和 electron 結(jié)合在一起的，可以讓我們非常方便的結(jié)合 electron 和 vue，需要做一些指定的配置。

初始化electron項(xiàng)目

可以參考 electron 官網(wǎng)的快速開始項(xiàng)目。

創(chuàng)建主進(jìn)程目錄和文件。

// electron-main/index.ts
import { app, BrowserWindow } from 'electron';
import path from 'path';
const createWindow = () => {
  const win = new BrowserWindow({
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      preload: path.join(__dirname, '../electron-preload/index.js'),
    },
  });
  if (app.isPackaged) {
    win.loadFile(path.join(__dirname, '../index.html'));
  } else {
    //  Use ['ENV_NAME'] avoid vite:define plugin
    const url = `http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`;

    win.loadURL(url);
  }
};
app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

需要注意引入的預(yù)加載文件應(yīng)該是打包后的 js 文件，路徑和 ts 文件路徑相同，只要類型改為 js 即可。

創(chuàng)建預(yù)加載目錄和文件。

在預(yù)加載文件中我們打印一下系統(tǒng)平臺(tái)。

// electron-preload/index.ts
import os from 'os';
console.log(os.platform());

配置vite-electron

tsconfig.json

在 tsconfig.json 中監(jiān)聽 electron 相關(guān)文件和提示。

"include": [..., "electron-main/**/*.ts", "electron-preload/**/*.ts"],

vite.config.ts配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import * as path from 'path';
import electron from 'vite-plugin-electron';
import electronRenderer from 'vite-plugin-electron/renderer';
import polyfillExports from 'vite-plugin-electron/polyfill-exports';
export default defineConfig({
  plugins: [
    vue(),
    electron({
      main: {
        entry: 'electron-main/index.ts',
      },
      preload: {
        // Must be use absolute path, this is the limit of rollup
        input: path.join(__dirname, './electron-preload/index.ts'),
      },
    }),
    electronRenderer(),
    polyfillExports(),
  ],
  build: {
    emptyOutDir: false, // 必須配置，否則electron相關(guān)文件將不會(huì)生成build后的文件
  },
});

配置主進(jìn)程和預(yù)加載腳本地址。

package.json配置

{
  "name": "electron-desktop",
  "private": true,
  "version": "1.0.0",
  "main": "dist/electron-main/index.js",
  "scripts": {
    "dev": "vite",
    "build": "rimraf dist && vite build && electron-builder"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "electron": "^18.2.0",
    "electron-builder": "^23.0.3",
    "electron-devtools-installer": "^3.2.0",
    "rimraf": "^3.0.2",
    "typescript": "^4.5.4",
    "vite": "^2.9.5",
    "vite-plugin-electron": "^0.4.3",
    "vue-tsc": "^0.34.7"
  }
}

主要是增加入口文件，因?yàn)?electron 還沒有原生支持 ts，因此目前還是必須加載 js 文件，所以入口文件我們配置為解析后的 js 文件路徑：

dist/electron-main/index.js，然后修改執(zhí)行腳本，在 build 命令中增加 electron-builder 打包命令。

electron-builder打包配置

# package.json
{
    ......,
    "build": {
        "appId": "com.electron.desktop",
        "productName": "ElectronVueVite",
        "asar": true,
        "copyright": "Copyright ? 2022 XingXingZaiXian",
        "directories": {
          "output": "release/${version}"
        },
        "files": [
          "dist"
        ],
        "mac": {
          "artifactName": "${productName}_${version}.${ext}",
          "target": [
            "dmg"
          ]
        },
        "win": {
          "target": [
            {
              "target": "nsis",
              "arch": [
                "x64"
              ]
            }
          ],
          "artifactName": "${productName}_${version}.${ext}"
        },
        "nsis": {
          "oneClick": false,
          "perMachine": false,
          "allowToChangeInstallationDirectory": true,
          "deleteAppDataOnUninstall": false
        }
      }
  }

electron-builder 的配置我們有一篇專門的文章介紹，這里并沒有什么特殊的配置，按照需求配置即可。

到這里就配置好了所有的文件，接下來(lái)我們執(zhí)行開發(fā)命令看一看效果。

yarn run dev

然后我們執(zhí)行打包命令看一看效果。

yarn run build

執(zhí)行完后會(huì)生成兩個(gè)目錄：dist 和 release。

dist 目錄中生成的是前端打包文件，release 中生成的是 electron 打包文件，內(nèi)容如下：

其中 win-uppacked 中生成的是無(wú)需安裝的執(zhí)行文件，將此目錄直接壓縮后就可以發(fā)送給別人，解壓即可使用。ExectronVueVite_1.0.0.exe 文件是安裝包，打開會(huì)顯示安裝過(guò)程，執(zhí)行完安裝過(guò)程后在系統(tǒng)的控制面板中的軟件列表中可以看到該軟件，也可以執(zhí)行卸載。

打開后就是正常的軟件界面。

我們創(chuàng)建好了項(xiàng)目結(jié)構(gòu)，那么在使用 Vue 開發(fā) Electron 桌面應(yīng)用的時(shí)候還有一個(gè)比較重要的知識(shí)點(diǎn)要了解，就是消息通信。在新版本的 electron 中，推薦使用上下文隔離方式進(jìn)行內(nèi)部進(jìn)程通信，electron 官網(wǎng)有很詳細(xì)的介紹和示例，這里我們只介紹一種方式，其他的方式大家可以通過(guò)查看官網(wǎng)示例來(lái)了解。

我們的示例是在 Vue 界面中顯示當(dāng)前系統(tǒng)平臺(tái)。

注冊(cè)上下文隔離接口

在 electron-preload/index.ts 中添加如下代碼：

import os from 'os';
import { contextBridge } from 'electron';
contextBridge.exposeInMainWorld('electronAPI', {
  platform: os.platform(),
});

編寫上下文隔離接口的typescript類型聲明

通過(guò) electron 注冊(cè)的上下文隔離接口會(huì)添加給 window 對(duì)象，但是原始的 window 對(duì)象并不存在這些接口和屬性，ts 就會(huì)報(bào)錯(cuò)，這時(shí)就需要我們?yōu)槠渚帉憈s類型聲明文件.d.ts。

// src/types/global.d.ts
export interface IElectronAPI {
  platform: string;
}
declare global {
  interface Window {
    electronAPI: IElectronAPI;
  }
}

在Vue中調(diào)用接口

我們?cè)?App.vue 中調(diào)用window.electronAPI.platform 接口，把系統(tǒng)平臺(tái)信息顯示在界面上。

// src/App.vue

執(zhí)行完以上步驟后，運(yùn)行項(xiàng)目看一下效果。

文章標(biāo)題：運(yùn)用Electron+Vue3.2+TypeScript+Vite開發(fā)桌面端
網(wǎng)站鏈接：http://fisionsoft.com.cn/article/dpgsdco.html