vue3 + Electron + vite 搭建桌面端应用（完整项目）

前端早间课

1251人浏览 · 2025-10-15 13:08:18

前端早间课 · 2025-10-15 13:08:18 发布

vue3 + Electron+ vite 搭建桌面端应用（完整项目）

前言

想成功，先发疯，不顾一切往前冲，嘎嘎一顿学就完事了！本次学习《Electron》速成项目！

三金四银，金九银十，多学知识，也不能埋头苦干，要成功，先发疯，头脑简单往前冲！
Electron + vite集成，非常友好

项目主要架构：
  1、安装框架开发
  2、配置vite 中使用 less 或 scss
  3、配置vite自动导入语法插件开发
  4、安装路由Router开发
  5、亮点：使用本地.json文件存储数据
  6、安装 Ant Design Vue
  7、配置electron.vite.config.mjs
  8、layouts搭建菜单组件开发
    a、新建menuVersions.vue模块文件
    a-1、components 布局组件模块聚合[布局组件：components]
      a-1-1、Menu [左侧菜单栏]
      a-1-2、Main [右侧布局栏]
      a-1-3、Header [头部栏]
    a-2、创建本地menu数据开发
  9、路由权限配置
  10、API接口方法统一调用本地数据 .json
  11、登录页面模块开发（窗口大小设置）
  12、首页模块开发（窗口大小设置）
  13、趣味答题模块（外部连接请求）
  14、工具箱模块，包含：
  	a、微信多开功能
  		a-1、微信多开功能
  		a-2、本地文件管理功能
  		a-3、便签功能
  		a-4、定时器功能
  		a-5、创建文件功能等
  24、搭建框架插件安装注意问题
  25、项目搭建步骤.md 文档说明

在这里插入图片描述

1、搭建步骤及方法

[搭建方法]
内含项目搭建步骤.md

 1、安装国内淘宝镜像(已经安装无需安装)：
    <!-- 切换国内淘宝镜像 -->
    npm config set registry <https://registry.npmmirror.com>
    <!-- 查看镜像源 -->
    npm config list

 2、搭建命令：(electron-vite命令)
   [electron-vite命令：参考官网](https://cn.electron-vite.org/guide/)

    npm create @quick-start/electron@latest

    ? Add TypeScript? » No
    是否使用TypeScript？选No，本教程使用JavaScript。如果喜欢TypeScript，请选择Yes。
    ? Add Electron updater plugin? » Yes
    是否添加Electron updater插件？选择Yes。
    ? Enable Electron download mirror proxy? » Yes
    是否开启Electron镜像下载代理。在国内网络环境，强烈建议选择Yes。
  3、配置vite 中使用 less 或 scss：
    npm add -D less  或  npm add -D sass
  4、参考源码
  		console.log(
		  `%c electron框架 %c 作者：前端早间课 %c `,
		  'background:transparent'，
		  "- -",
			"- vue3_Electron_vite -",
			"- Wx：laowang66608 -",
			"- -",
		)