Electron+Vue3+Ant Design Vue从搭建到发布的实践之旅

2023-12-23 17:15:47

Electron是一个跨平台的应用开发框架，使用 JavaScript、HTML 和 CSS 来构建跨平台的桌面应用程序。Vue3是一个渐进式 JavaScript 框架，Ant Design Vue是基于Ant Design的Vue3 UI组件库。本教程将介绍如何使用Electron + Vue3 +Ant Design Vue来构建和发布跨平台桌面应用。

准备工作

安装Node.js和npm
安装Electron
安装Vue3
安装Ant Design Vue

项目搭建

创建项目

vue create electron-app

安装依赖

cd electron-app
npm install electron
npm install vue@next
npm install ant-design-vue

配置项目

在项目根目录下的package.json文件中，添加以下代码：

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "dependencies": {
    "ant-design-vue": "^1.7.3",
    "electron": "^19.0.0",
    "vue": "^3.2.31"
  },
  "devDependencies": {
    "electron-builder": "^23.1.2",
    "vue-cli-plugin-electron-builder": "^2.0.4"
  }
}

界面开发

在项目根目录下创建src文件夹，并在其中创建App.vue文件，这是界面的主文件。

<template>
  <div id="app">
    <h1>你好，Electron！</h1>
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>