快速搭建一个electron-vite项目

SnowDreamXUE

于 2025-05-15 23:02:47 发布

阅读量488

点赞数 4

文章标签： electron 前端

By SnowDreamXUE

本文链接：https://blog.csdn.net/SnowDreamXUE/article/details/147993969

版权

1. 初始化项目

在命令行中运行以下命令

npm create @quick-start/electron@latest

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

# npm 7+，需要添加额外的 --：
npm create @quick-start/electron@latest my-app -- --template vue

目前支持的模版预设如下

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
svelte	svelte-ts
solid	solid-ts

2. 按提示选择需要的配置

下面是我的选择，可以根据自己的需求进行选择

在这里插入图片描述

Project name	项目名称，自定义输入
Select a framework	选择框架，vanilla, vue, react, svelte, solid可选择，演示这里我们选择vue
Add TypeScript	是否添加TypeScript，演示这里我们选择no
Add Electron updater plugin	是否添加Electron更新插件，yes
Enable Electron download mirror proxy	镜像下载代理，国内网络建议开启，yes

3. 进入项目目录，安装依赖

进入目录

cd electron-app

安装依赖

npm install

4. 启动项目

npm run dev

出现下面应用窗口说明项目启动成功

5. 目录结构

├── .vscode                  //vscode配置文件（可以不管）
├── build                    // 编译过程输出文件目录
├── dist                    // 打包后输出目录
├── node_modules            // 依赖模块
├── out                     //编译过程输出文件目录
├── resources                // 公共资源文件，主进程使用
│       └── icon.png         //默认图标
├──src                     
│   ├── main               // 主进程开发目录
│   │  └── index.js       //主进程入口文件      
│   ├── preload           // 预加载脚本开发目录
│   │   └── index.js        // 预加载默认脚本
│   └── renderer          // 渲染进程开发目录，类似纯web项目根目录
│              ├── src
│              │    ├── assets  //资源文件目录
│              │    ├── components  //组件目录
│              │    ├── App.vue        // 入口页面
│              │    └── main.js        // 入口文件
│              └── index.js.html        // 默认html文件
├── .editorconfig                    
├── .eslintignore                //eslint代码检查忽略配置文件
├── .eslintrc.cjs                 //eslint代码检查配置文件
├── .gitignore                   //git忽略配置文件
├── .npmrc                       // npm源配置文件
├── .prettierignore               //prettier代码格式化忽略配置文件
├── .prettierrc.yaml              //prettier代码格式化配置文件
├── dev-app-update.yml           
├── electron-builder.yml           //打包配置文件
├──electron.vite.config.mjs       //electron-vite配置文件
├── package-lock.json     
├── package.json              
└──README.md            //项目说明