用vue3 + electron开发一个简单的翻译工具

蓝冰链雪

已于 2024-04-11 09:55:00 修改

阅读量513

点赞数 1

分类专栏：前端项目实战文章标签： electron javascript vue.js 前端框架

于 2023-08-04 10:24:15 首次发布

本文链接：https://blog.csdn.net/Lijron/article/details/132058992

版权

前端项目实战专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、前言

项目代码原文地址

框架概念和特点

Vue 是一个渐进式框架，用于构建用户界面。Vue 旨在通过简单、灵活的 API 帮助开发者构建高性能、可维护的应用程序。

Vue 具有以下特点：

渐进式框架：Vue 可以适应各种项目规模，从小型应用到大型企业级项目。
易于学习和使用：Vue 的 API 简单易懂，文档详细，上手容易。
高性能：Vue 采用了虚拟 DOM 和组件级别的优化，使得渲染性能优异。
双向数据绑定：Vue 的双向数据绑定可以很方便地实现视图和模型之间的同步更新。
组件化：Vue 强调组件化开发，使代码更易于维护、复用和扩展。

Electron 是一个用于构建跨平台桌面应用的框架。它使用 Web 技术（HTML、CSS 和 JavaScript）来构建原生桌面应用。

Electron 具有以下特点：

跨平台：Electron 可以为 Windows、macOS 和 Linux 构建应用，使用一套代码即可。
原生体验：Electron 使用 Chromium 作为其 UI 渲染引擎，可以实现类似原生应用的体验。
丰富的 API：Electron 提供了很多 API，使得开发者可以访问硬件资源和系统功能，如文件系统、网络连接等。
开发效率：Electron 使用 JavaScript 和 Web 技术进行开发，开发者可以利用现有的 Web 开发技能和工具。
社区支持：Electron 有一个活跃的社区，提供了丰富的插件和工具，可以提高开发效率。

设计目标

本文将介绍如何使用 Vue 3 和 Electron 结合开发一个简单的桌面端翻译工具。该项目旨在通过可视化的操作流程，简化代码编写，帮你快速完成项目开发。通过这个实战项目，你将学会如何利用 Vue 3 和 Electron 开发一个初始的桌面应用程序。

二、环境搭建

安装nodejs

在进行该项目之前，请确保已经安装了 Node.js 运行环境。项目中的依赖项将通过 Node.js 进行安装。由于各个项目所依赖的 Node.js 版本可能不同，因此我们可以使用 nvm-node 版本管理工具来进行快速版本切换。nvm-node 将允许您在多个 Node.js 版本之间自由切换，以便为不同项目提供正确的运行环境。

首先，在nvm网站下载nvm最新的安装包并进行默认安装。

在这里插入图片描述

然后，按 win+R 快捷键打开运行窗口，输入 cmd 打开命令行窗口。

注：在切换nodejs的版本时，需要通过管理员权限打开命令行窗口

nvm list # 查看当前可用nodejs的版本
nvm install 16.0.0 # 安装对应版本的nodejs
nvm use 16.0.0 # 切换nodejs的版本

安装vue脚手架

vue官方文档

npm install @vue/cli -g
vue ui # 打开可视化创建界面

新项目的创建及数据初始化参照以下步骤进行。

在这里插入图片描述

安装electron插件

electron官方文档

图中选框如有需要，可直接点击安装，当前项目暂时还不需要用到这些插件。

在这里插入图片描述

完成安装后会弹出版本选择等操作，默认点击绿色打勾按钮。

安装element框架

element官方文档

在这里插入图片描述

@element-plus/icons-vue 是独立出来的图标组件库，需要一同安装。

在这里插入图片描述

安装axios库

axios官方文档

在这里插入图片描述

项目运行

完成项目搭建后就可以先运行查看一下效果。

在这里插入图片描述

三、项目开发

在开始翻译工具的开发之前，推荐大家使用功能强大的 VS Code 编辑器。如果还没有安装 VS Code，可以点击这里进行安装。VS Code 内置了丰富的插件和拓展，能够极大地提升开发体验。在日常开发中，VS Code 提供了非常多的便利，是一款非常值得推荐的编辑器。

文件结构

src ：项目源代码

—api ：放置接口方法的目录(自行创建)

——index.js ：编写接口方法的主文件(自行创建)

—assets ：静态资源文件

——logo.png

—components ：组件目录

——HelloWorld.vue

App.vue ：页面渲染的主要文件

background.js ：项目的主入口文件

main.js ：页面渲染的入口文件

自定义导航栏

在 background.js 中添加以下代码，去除原生的导航栏样式。

在这里插入图片描述

隐藏前

在这里插入图片描述

隐藏后

在这里插入图片描述

打开 HelloWorld.vue 文件，编写自定义导航栏。

<template>
  <div class="container">
    <div class="tool">
      <span class="title">translate</span>
    </div>
    <div class="head">
      <el-icon class="el_icon" @click="minimize">
        <Minus />
      </el-icon>
      <el-icon class="el_icon" @click="close">
        <Close />
      </el-icon>
    </div>
  </div>
</template>
<script setup>
import { Close, Minus } from "@element-plus/icons-vue";
import { ipcRenderer } from "electron";
function minimize() {
  ipcRenderer.send("minimize");
}
function close() {
  ipcRenderer.send("close");
}
</script>
<style scoped>
.container {
  height: 25px;
  width: 100%;
}
.tool {
  -webkit-app-region: drag;
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  right: 70px;
  z-index: 10001;
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.title {
  font-weight: bold;
  color: #363a69;
  user-select: none;
}
.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fcfcfc;
  z-index: 10000;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.el_icon {
  padding: 7px 10px;
  color: #363a69;
  transition-duration: 500ms;
}
.el_icon:hover {
  cursor: pointer;
  background: #e6e6e6;
  transition-duration: 500ms;
}
</style>

此时网页控制台可能会出现以下错误。

在这里插入图片描述

这时，我们需要打开根目录下的 vue.config.js 文件，添加以下代码。

module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true // 处理渲染进程引入nodejs环境报错问题
    }
  }
})

然后重新运行项目。

在这里插入图片描述

项目在运行中，总会因为加载拓展失败等比较长的时间。

在这里插入图片描述

我们只需要删除以下代码，就能解决这个报错问题。

在这里插入图片描述

完成组件编写后，在 main.js 中导入element框架，这样组件中引入的图标才会正常显示出来。

在这里插入图片描述

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

接下来，在 background.js 中添加与渲染进程通讯的ipc事件，完成按钮事件交互。

关闭窗口前需要先关闭调试工具窗口才能触发其关闭

ipcMain.on('close', () => {
    win.close() // 关闭窗口
})
ipcMain.on('minimize', () => {
    win.minimize() // 窗口最小化
})

在这里插入图片描述

百度翻译API

此项目的翻译功能主要是对接百度翻译API

百度翻译API文档

首先，登录百度账号。

在这里插入图片描述

当前已申请过的，就没法继续点击，进去后根据要求填写表单提交即可。

在这里插入图片描述

完成服务申请后，可以在控制台的开发者信息查看自己的APP ID和密钥。

在这里插入图片描述

参照API接入文档处理调用参数，在 index.js 下编写调用函数。

import axios from "axios"
const URL = 'http://api.fanyi.baidu.com/api/trans/vip'
function getTranslate(param) {
    return new Promise((reslove, reject) => {
        axios.post(params(URL + '/translate', param)).then((res) => {
            reslove(res)
        })
    })
}
// 链接拼接处理函数
function params(url, params) {
    return params ? url + '?' + Object.keys(params)
        .filter(key => params[key] || params[key] === 0)
        .map(key => `${key}=${params[key]}`)
        .toString().replace(/,/g, '&') :
        url
}
export default {
    getTranslate
}