笔记大全

怎么使用vue3+ts+vite+electron搭建桌面应用

更新时间：2023-07-23

前言

Vue.js是一套用于构建用户界面的渐进式JavaScript框架，而Vue 3是Vue.js的最新版本，提供了更加强大和高效的功能。TypeScript是JavaScript的一个超集，可以为JavaScript代码添加静态类型和强大的面向对象特性。Vite是一款由Evan You（Vue.js的作者）开发的现代化前端构建工具，它具有快速启动、热模块替换和按需编译等特性。Electron是一个开源的框架，可以使用HTML、CSS和JavaScript构建跨平台的桌面应用程序。

第一步：创建Vite项目

首先，我们需要使用Vite创建一个Vue 3的项目。打开命令行工具，进入到你希望创建项目的文件夹下，然后执行以下命令：

  npm init vite@latest my-app --template vue-ts
  cd my-app
  npm install

这个命令会创建一个名为my-app的文件夹，其中包含了一个基于Vue 3和TypeScript的项目模板。执行完上述命令后，我们需要进入到my-app文件夹，并安装依赖。

第二步：配置Electron环境

接下来，我们需要配置Electron环境。在my-app文件夹下，创建一个新的文件夹，可以命名为`electron`。在`electron`文件夹下创建一个新的文件，可以命名为`main.js`，用于配置Electron的主进程。

  // electron/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.loadURL('http://localhost:3000')
  }
  
  app.whenReady().then(() => {
    createWindow()
  
    app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })
  
  app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
  })

在这个配置文件中，我们使用了Electron提供的API来创建一个窗口，并加载Vue 3项目的开发服务器的URL。

第三步：修改package.json

接下来，我们需要修改项目的package.json文件，以便在启动项目时可以启动Electron，而不仅仅是Vue开发服务器。在package.json文件中添加以下代码：

  {
    "scripts": {
      "dev": "vite",
      "start": "vite build && electron ."
    },
    "devDependencies": {
      "electron": "^13.1.1"
    }
  }

在这个配置中，我们将vite build命令和electron命令组合在一起，以便在启动项目时可以同时启动Electron和Vue开发服务器。

总结

使用Vue 3、TypeScript、Vite和Electron可以快速搭建一个强大的桌面应用程序。通过Vite创建一个基于Vue 3和TypeScript的项目，并在其中添加Electron的配置文件和脚本，就可以实现Vue框架和Electron框架的整合。这样一来，我们就可以使用Vue和TypeScript开发前端界面，并使用Electron构建跨平台的桌面应用程序。

c语言编程笔录