一、为什么要写这篇文章？

现如今各个框架都逐渐成熟，可是当刚开始初步接触这些框架的时候，很多人都不知道该如何快速创建这样一个组合式的项目，在网寻找快速创建的方法基本上都没有找到能够快速创建这种项目的方法，跟着官方的教程一步一步来创建很麻烦。

在某个机缘巧合之下我发现了这样一个项目electron-vite，这个项目能够很快的创建好一个初始化的electron＋vite+vue的项目，这样一个快速的工具值得被更多人发现，所以我决定写一篇关于如何快速创建electron＋vite+vue的教程。

二、各框架介绍

Electron

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

Vite

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。

然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

Vue

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

• 无需构建步骤，渐进式增强静态的 HTML

• 在任何页面中作为 Web Components 嵌入

• 单页应用 (SPA)

• 全栈 / 服务端渲染 (SSR)

• Jamstack / 静态站点生成 (SSG)

• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

三、准备工作

安装node.js

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download

根据不同平台系统选择你需要的 Node.js 安装包，然后安装。

安装成功之后我们可以收入命令：node -v和npm -v查看安装的版本。

electron-vite 需要 Node.js 版本 18+，20+ 和 Vite 版本 4.0+

四、开始搭建electron＋vite+vue项目

初始化第一个 electron-vite+vue 项目（使用electron-vite）​

在命令行中运行以下命令：

npm create @quick-start/electron@latest

或者

yarn create @quick-start/electron

或者

pnpm create @quick-start/electron

然后按照提示操作即可!

✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

Scaffolding project in ./<electron-app>...
Done.

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Electron + Vue 项目，运行:

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

# pnpm
pnpm create @quick-start/electron my-app --template vue

目前支持的模板预设如下：

经过这些操作你就有了一个基本的electron＋vite+vue项目了（在代码操作提示阶段选择vue）。

初始化项目

使用npm命令：npm i

这样大家就可以创建一个electron＋vite+vue项目啦！这个项目非常的好，很大程度的方便了大家初始化项目的时间。