构建Vue3桌面应用程序的方法

编程学习 2021-07-04 13:23www.dzhlxh.cn编程入门
在项目中会用到 Electron , 一种最流行的框架,可使用Javascript构建跨平台的桌面应用程序。在本文中,我们将研究如何通过 Vite 开发 Vue 3 桌面项目,感兴趣的可以了解一下

在本文中,我们将研究如何通过 Vite 开发 Vue 3 桌面项目。

在项目中会用到 , 一种最流行的框架,可使用Javascript构建跨平台的桌面应用程序。 因此,许多受欢迎的应用程序都在使用Electron,例如VSCode,Slack,Twitch等。

先看看要做什么:

尽管这只是一个 Vite 的基本模板,但它跑在专用程序而不是浏览器中。 这是构建自己的桌面应用的必要步骤。

以下是开发过程。

创建的基本 Vite 程序

首先创建 Vite 应用。 在这里不会过多介绍 Vite 的工作原理。

在终端下执行以下命令:

npm init @vitejs/app
cd [project-name]
npm install

完成了,先在浏览器中试一下。

在终端中简单的运行 npm run dev 命令。然后在浏览器中打开本机地址,可以看到是这样的:

没有问题,接着就该把 Electron 添加到它的设置中了。

在 Vite 项目中添加 Electron

这里按照 在我们的 Vite 应用中进行一些调整。

首先安装 Electron。在终端下输入以下命令:

Install Electronnpm install --save-dev electron

接着再看一下 Electron 手册。

手册上说简单的 Electron 配置需要四个文件:

  • package.json —— 这个已经有了
  • main.js
  • preloader.js
  • index.html

看上去项目中已经有了 main.js和index.html文件,但它们是 Vite 的文件,而不是 Electron 的文件。 Vite 的文件只能用于运行 Vite 程序,所以还需要提供单独的 Electron 文件。

main.js 用于创建桌面程序并加载到 index.html 中,它还应该包括我们构建的 Vite 程序代码。

构建 Vite 程序

所以首先必须构建 Vite 程序。 因为要把它与 Electron 进行整合,所以还需要做一些额外的配置。我们要确保在构建项目时,对最终 javascript 和 css 文件的所有引用都指向正确的路径。

要构建的 Vite 项目将会创建以下结构的 dist 目录。

但是由于我们的 Electron 代码位于项目的根目录中,所以应该将整个项目的基础设置为 dist 文件夹。 可以通过 path 库在 vite.config.js 文件中设置 base 属性来实现。

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, './dist/'),
  plugins: [vue()]
})

现在可以在终端中运行 npm run build 来创建 dist 目录了。

设置 Electron 的 main.js

下一步是在项目的根目录中创建 main.js 文件。

创建完毕后我们只需要从 Electron quick start guide 中复制粘贴代码就行了。

在我们加载 index.html 的地方,要将其改为 dist/index.html,以便在 dist 目录中使用该文件。

所以 main.js 中的最终代码是这样:

//main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('dist/index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

创建并编写 preload.js.

接下来让在项目根目录中创建 preload.js 文件,然后再次使用,这次不必修改任何内容。

//preload.js
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
})

修改 package.json

差不多快要完成了,最后还需要对 package.json文件进行一些修改,以便运行 Electron 命令。

首先要设置 main 属性,在默认情况下,Electron 会在根目录中查找 index.js 文件并执行,但是由于我们的文件名为 main.js,所以需要在 package.json 中定义。

//package.json
{
  "name": "vite-electron",
  "version": "0.0.0",
  "main": "main.js", // 这一行
  ...
}

然后设置运行 Electron 的方式,在 scripts 部分中新创建一个名为electron:start 的脚本,内容是electron . 。

//package.json
{
  "name": "vite-electron",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron:start": "electron ." // 这里
  },
  ...
}

以上就是所有的代码了。

最后在终端中执行: npm run electron:start 命令,然后就能看到:

桌面程序终于完成了,很简单吧~

写在最后

近期在提升 Vue 的过程中,发现一个高逼格的 Vue3+TS 教程。 无偿分享给掘仔们,

到此这篇关于构建Vue3桌面应用程序的方法的文章就介绍到这了,更多相关Vue3桌面应用程序内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板