Vite+Electron快速构建VUE3桌面应用的实现

yizhihongxing

下面我将为你详细讲解 "Vite + Electron 快速构建 Vue3 桌面应用的实现"。

简介

Vite 是一个基于 JavaScript 的构建工具,旨在提供一种快速开发的体验。它专注于提供简单的配置、快速的热更新功能以及媲美于 Webpack 的构建功能,对于快速实现前端开发者的需求非常有帮助。

Electron 是一个基于 Node.js 和 Chromium 的桌面应用框架,它可以将 Web 技术应用到桌面应用程序开发中,提供了和原生应用相媲美的用户体验,也极大地方便了前端开发人员的开发和部署。

Vue3 是一个支持更好的 TypeScript 和 Composition API 的新版本 Vue,拥有更方便的开发体验,以及更快的渲染速度。

在实际的前端开发中,我们通常会使用Vue框架开发Web应用程序,但是在很多情况下,我们需要将Web应用部署到桌面环境中,这就需要使用到桌面应用框架Electron,同时使用 Vite 可以更好的提升前端开发效率。

下面就详细讲解如何使用 Vite+Electron 快速构建 Vue3 桌面应用。

步骤

1. 创建 Vue3 项目

首先我们需要创建一个基于 Vue3 的项目,我们可以直接使用 Vue 官方的脚手架来创建:

npm init @vitejs/app my-electron-vue3-app --template vue-ts

2. 安装 Electron

接下来我们需要安装 Electron,使用以下命令:

npm install --save-dev electron

3. 配置 Vite

我们需要在项目的根目录下创建一个 vite.config.ts 配置文件,并进行以下配置:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  build: {
    outDir: 'dist/renderer', // 打包后的文件存储目录
    emptyOutDir: true,
    assetsDir: '.', // Vite 处理的静态资源目录, '.' 表示根目录
  },
})

4. 配置 Electron

在项目的根目录下创建一个名为 main.ts 的文件,这是我们创建 Electron 应用程序的入口文件,进行以下配置:

import { app, BrowserWindow } from 'electron'
import path from 'path'

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

  if (process.env.NODE_ENV === 'development') {
    win.loadURL(`http://localhost:3000`)
    win.webContents.openDevTools()
  } else {
    win.loadFile(path.join(__dirname, '../renderer/index.html'))
  }
}

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

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

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

index.html 中加载静态资源时,需要指定 base,并且在 router/index.ts 中也需要进行相应的配置:

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
]

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes,
})

export default router

5. 编写运行命令

package.json 中进行以下配置:

{
  "scripts": {
    "dev": "vite && electron .",
    "build": "vite build"
  }
}

6. 构建和打包

使用以下命令进行构建:

npm run build

构建完成后会生成一个 dist/renderer 目录,在 dist 下再创建一个 main.js 文件,内容为:

const { app, BrowserWindow } = require('electron')
const path = require('path')

let mainWindow

function initialize() {
  function createWindow() {
    mainWindow = new BrowserWindow({
      width: 852,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
        enableRemoteModule: true,
        contextIsolation: false,
        preload: path.join(__dirname, 'preload.js'),
      },
    })

    mainWindow.loadFile('index.html')

    mainWindow.on('closed', function () {
      mainWindow = null
    })
  }

  app.on('ready', createWindow)

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

  app.on('activate', function () {
    if (mainWindow === null) createWindow()
  })
}

initialize()

然后使用以下命令打包:

electron-builder build --mac --win

这样我们就实现了使用 Vite+Electron 快速构建 Vue3 桌面应用的过程了。

示例说明

示例1:在 Electron 项目中引入 Bootstrap

index.html 中加入以下代码:

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.0-beta1/css/bootstrap.min.css" integrity="sha384-UPlrc8yavQRYiG9j5SC0E/W5BvAugJJ6Xx/ntIWNjx5LOifNidY02YdLtapMMUtL" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.0-beta1/js/bootstrap.bundle.min.js" integrity="sha384-D5wV+zsnSozV/UuMf0zGGm7uSEOIccN7z5kXwbrHS/4Kv3UMkpejUWEM1o/Qxz6X" crossorigin="anonymous"></script>

这样我们就成功为 Electron 项目引入了 Bootstrap。

示例2:使用 Redis 做数据存储

首先我们需要安装 redis:

npm install redis

然后创建一个叫 utils/redis.ts 的文件,在该文件中实现 Redis 的数据存储功能。

import redis from 'redis'

function set(key: string, value: string) {
  const client = createClient()
  client.set(key, value, redis.print)
}

function get(key: string, callback: Function) {
  const client = createClient()
  client.get(key, callback)
}

function createClient() {
  return redis.createClient(
    process.env.REDIS_PORT,
    process.env.REDIS_HOST,
    {
      auth_pass: process.env.REDIS_PASSWORD,
    },
  )
}

export default {
  set,
  get,
}

这样我们就可以使用 Redis 来做数据存储了。

以上就是使用 Vite+Electron 快速构建 Vue3 桌面应用的完整攻略,如果有不懂的地方可以留言哦。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vite+Electron快速构建VUE3桌面应用的实现 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 深入浅析vue组件间事件传递

    深入浅析 Vue 组件间事件传递 在 Vue 应用程序中,组件是相互独立的,但有时需要从一个组件向另一个组件传递数据或触发事件。在这种情况下,Vue 允许通过事件传递数据和在组件之间通信。 父子组件之间的事件传递 父子组件之间的事件传递是最简单和最常见的一种情况。Vue 组件中,子组件需要把数据传递给父组件的时候,它可以通过 emit 事件的方式来触发父组件…

    Vue 2023年5月27日
    00
  • React中的权限组件设计问题小结

    我将详细讲解“React中的权限组件设计问题小结”的完整攻略。首先,我们需要明确权限组件的概念和作用,权限组件用于控制用户在系统中的访问权限,保障系统的安全性和稳定性。在React中,我们可以使用高阶组件(HOC)来实现权限控制。 一、HOC高阶组件思路 1.定义一个高阶组件 我们首先需要定义一个高阶组件,用于封装特定的组件并添加权限控制逻辑。以下是一个基本…

    Vue 2023年5月28日
    00
  • JS简单实现父子窗口传值功能示例【未使用iframe框架】

    下面是对“JS简单实现父子窗口传值功能示例【未使用iframe框架】”的详细攻略: 1. 基本实现原理 在父窗口中,定义一个变量保存需要传递的数据 在父窗口中,定义一个函数,该函数将需要传递的数据作为参数传递给子窗口 在子窗口中,定义一个变量保存从父窗口传递来的数据 在子窗口中,通过父窗口定义的函数来接收从父窗口传递来的数据 2. 实现过程示例 2.1 示例…

    Vue 2023年5月28日
    00
  • vue组件中使用props传递数据的实例详解

    那么就开始详细讲解“vue组件中使用props传递数据的实例详解”吧。 什么是props 在Vue中,父组件可以通过props向子组件传递数据,子组件接收props后在组件内部使用这些数据。props是short for“properties”,它可以传递任何类型的数据,包括字符串、数字、数组、对象等等。 基本用法示例 假设我们有一个父组件parent和一个…

    Vue 2023年5月27日
    00
  • vue parseHTML函数源码解析 AST预备知识

    下面我将给出“vue parseHTML函数源码解析 AST预备知识”的完整攻略。 一、概述 在Vue的源码中,parseHTML函数是实现模板编译的关键函数之一。parseHTML函数的作用是将HTML字符串解析为AST(抽象语法树)。 AST是一种抽象的树状表达方式,它将代码的语法结构进行了抽象和归纳,并以树的形式表现出来。在Vue中,AST用于表示模板…

    Vue 2023年5月27日
    00
  • vue+element获取el-table某行的下标,根据下标操作数组对象方式

    获取el-table某行的下标,可以通过以下步骤实现: 为el-table设置:row-key属性,用于标识每行的唯一标识符,例如: <el-table :data="tableData" :row-key="row => row.id"> <!– 表头和列内容 –> </el-…

    Vue 2023年5月29日
    00
  • JavaScript实现简易计算器案例

    JavaScript实现简易计算器案例攻略 项目背景 本项目旨在通过JavaScript实现一个简易的计算器,用户可以在浏览器上输入数字和运算符进行加减乘除的四则运算。 程序思路 HTML界面布局: 在HTML中使用<input>标签创建输入框,用户可通过该标签输入数字和运算符。 在HTML中创建4个按钮,分别代表加减乘除四种运算,用户可通过点击…

    Vue 2023年5月28日
    00
  • springboot vue完成编辑页面发送接口请求功能

    准备工作首先,需要准备好以下环境和工具: JDK 1.8及以上版本 Maven Node.js Vue CLI:可以通过npm安装:npm install -g vue-cli 创建项目使用Vue CLI来创建一个基础的Vue.js项目: vue init webpack vue-project 执行上述命令会创建一个名为“vue-project”的Vue.…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部