基于Electron、Vue3和TypeScript的桌面小工具之旅第三天

2023-09-26 10:24:15







## Electron、Vue3和TypeScript搭建桌面小工具之旅第三天

大家好，欢迎来到Electron、Vue3和TypeScript搭建桌面小工具之旅的第三天！在今天的文章中，我们将继续完善我们的小工具框架，并开始添加一些基本的功能。

### 搭建项目框架

首先，我们需要搭建一个基本的项目框架。我们将使用Vue3的CLI来创建一个新的项目。在命令行中，输入以下命令：

vue create my-desktop-app


这将创建一个新的Vue3项目，名为“my-desktop-app”。

接下来，我们需要安装Electron。在命令行中，输入以下命令：

npm install electron --save-dev


这将把Electron安装为开发依赖项。

现在，我们需要创建一个新的Electron主进程文件。在“src”文件夹中，创建一个名为“main.js”的文件。在“main.js”文件中，输入以下代码：

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

function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({ width: 800, height: 600 })

// 加载index.html文件
win.loadFile('index.html')

// 打开开发者工具
win.webContents.openDevTools()
}

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

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

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


在“src”文件夹中，创建一个名为“index.html”的文件。在“index.html”文件中，输入以下代码：

欢迎使用我的桌面小工具！

```

现在，我们可以运行我们的应用程序。在命令行中，输入以下命令：

npm run dev

这将启动Electron并加载“index.html”文件。

添加基本功能

现在，我们已经搭建好了基本框架，我们可以开始添加一些基本的功能了。首先，我们将添加一个菜单栏。在“main.js”文件中，找到createWindow()函数，并在其中添加以下代码：

const menuTemplate = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        click: () => {
          // 创建一个新的窗口
          const win = new BrowserWindow({ width: 800, height: 600 })
          win.loadFile('index.html')
        }
      },
      {
        label: '打开',
        click: () => {
          // 打开一个文件对话框
          const { dialog } = require('electron')
          const files = dialog.showOpenDialogSync()
          if (files) {
            // 加载选中的文件
            win.loadFile(files[0])
          }
        }
      },
      {
        label: '保存',
        click: () => {
          // 保存当前窗口的内容
          win.webContents.savePage()
        }
      },
      {
        label: '退出',
        click: () => {
          app.quit()
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        click: () => {
          win.webContents.undo()
        }
      },
      {
        label: '重做',
        click: () => {
          win.webContents.redo()
        }
      },
      {
        label: '剪切',
        click: () => {
          win.webContents.cut()
        }
      },
      {
        label: '复制',
        click: () => {
          win.webContents.copy()
        }
      },
      {
        label: '粘贴',
        click: () => {
          win.webContents.paste()
        }
      }
    ]
  },
  {
    label: '查看',
    submenu: [
      {
        label: '开发者工具',
        click: () => {
          win.webContents.openDevTools()
        }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(menuTemplate)
Menu.setApplicationMenu(menu)

现在，我们可以在应用程序中看到一个菜单栏了。

接下来，我们将添加一个工具栏。在“index.html”文件中，找到<body>标签，并在其中添加以下代码：

<div id="toolbar">
  <button id="new-button">新建</button>
  <button id="open-button">打开</button>
  <button id="save-button">保存</button>
</div>

在“main.js”文件中，找到createWindow()函数，并在其中添加以下代码：

const { Menu, MenuItem } = require('electron')

const toolbar = new Menu()
toolbar.append(new MenuItem({ label: '新建', click: () => {
  // 创建一个新的窗口
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
} }))
toolbar.append(new MenuItem({ label: '打开', click: () => {
  // 打开一个文件对话框
  const { dialog } = require('electron')
  const files = dialog.showOpenDialogSync()
  if (files) {
    // 加载选中的文件
    win.loadFile(files[0])
  }
} }))
toolbar.append(new MenuItem({ label: '保存', click: () => {
  // 保存当前窗口的内容
  win.webContents.savePage()
} }))

win.setMenu(toolbar)