Electron + Vue2 框架构建测试 Demo

2023-11-17 16:29:34

Electron + Vue2：构建跨平台桌面应用程序的终极指南

简介

对于熟悉前端开发技术栈的开发人员来说，Electron + Vue2 组合堪称构建跨平台桌面应用程序的理想选择。Electron 作为 GitHub 开发的开源框架，让开发者能够利用 JavaScript、HTML 和 CSS 来打造应用程序，而 Vue2 则以其构建用户界面方面的易用性和灵活性而著称。

安装和设置

安装 Node.js： 作为 JavaScript 运行时环境，Node.js 是运行 JavaScript 代码的前提条件。访问 Node.js 官网下载并安装最新版本。
安装 Electron： 通过 npm 安装 Electron，终端或命令提示符中输入：

npm install electron --save-dev

安装 Vue2： 接着安装 Vue2 和 Vue 路由器：

npm install vue vue-router --save

创建 Electron 项目

使用 Electron 初始化一个新项目：

electron init my-app

创建 Vue2 项目

在 Electron 项目中，创建一个 Vue2 项目：

vue create src

配置 Electron 项目

在 package.json 文件中，添加以下脚本：

"scripts": {
  "start": "electron .",
  "build": "electron-builder"
}

配置 Vue2 项目

编辑 main.js 文件：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

编辑 App.vue 文件：

<template>
  <div id="app">
    <h1>Hello Electron + Vue2!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
</style>