电子伪造 + vite + vuejs
#javascript #编程 #教程 #vue

从我的文章中复制：https://brojenuel.com/blog/Electron-Forge-Vite-VueJS-Easier-Way

首先，我真的很喜欢电子锻造

另一件事是Electron Forge具有用于Vite的内置模板，我们可以轻松地使用它来设置VUE。那么我们该怎么做？在本文教程中，我们将使用vite + vue + tyscript，因为打字稿是一种非常好的类型安全语言。

步骤1：创建一个新项目

要证明它，我们必须通过在您的终端中运行此命令来创建一个新项目，如果您没有纱线，请通过运行npm install -g yarn安装它，也可以使用npm。

注意：您可以将my-new-app更改为您想要的任何项目名称。

yarn create electron-app my-new-app --template=vite-typescript

或使用NPM：

npm init electron-app@latest my-new-app -- --template=vite-typescript

my-new-app将是我们项目的名称。模板将是Vite+打字稿。

brojenuel electron vite vue

一次，就完成了。在VS代码或您正在使用的任何IDE或代码编辑器中打开项目。

步骤2：让我们设置vue依赖性

因为我们正在使用Vite。我们需要在我们的开发依赖项中安装一个名为@vitejs/plugin-vue的插件：

yarn add -D @vitejs/plugin-vue

然后我们必须安装vue 

yarn add vue

步骤3：让我们配置一些文件

配置./index.html文件。我们将创建一个DIV并将ID设置为app。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>

  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/renderer.ts"></script>
  </body>
</html>

让我们编辑文件./vite.renderer.config.ts。这是我们为渲染器设置Vite配置的地方。我们必须添加VITE VUE插件。

import { defineConfig } from "vite";
import VuePlugin from "@vitejs/plugin-vue";

// https://vitejs.dev/config
export default defineConfig({
    plugins: [VuePlugin()],
});

在./src目录中创建一个名为App.vue的文件，并将其添加为内容或输入您想要的任何内容。

<template>
    <div>Hello `Electron + Vite + Vue + TypeScript` World!</div>
</template>

接下来，让我们配置./src/renderer.ts。该文件负责呈现前端。让我们替换代码：

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

就是这样！ ð这很容易。您可以添加和使用vue-router，pinia和您喜欢在VUE应用程序中使用的其他依赖项。

您现在可以运行此启动电子以进行开发：

yarn start

您可以使用此脚本构建它：

yarn make

您可以使用此脚本发布它，以了解有关发布的信息，您可以在此处查看Electron Forge文档https://www.electronforge.io/config/publishers，或者在评论中让我知道，如果您想要有关如何发布的教程：

yarn publish

我希望这篇简短的文章有用！欢呼！

Support BroJenuel