Vue3+Electron+Vite桌面端搭建：从0到1搭建项目（第一期）
续之前《Vue3+Electron+Vite 搭建桌面端应用https://mp.weixin.qq.com/s/7CZyiEzUy3Slk05tJQjwcA》文章，很多小伙伴私信说对Electron开发特别感兴趣～ 今天就把桌面端开发拆分成循序渐进的学习系列，这一篇先教大家从搭建到运行项目，全程保姆级步骤，初学者也能跟着做！
后续还会持续更新这些实用功能，跟着学就能独立开发完整应用：
-
项目框架搭建（本篇）；
-
项目布局菜单；
-
首页功能点；
-
微信多开功能；
-
文件管理；
-
便签随机；
-
关闭桌面；
-
电脑右下角菜单;
-
打开本地文件夹；
-
安装包打包运行；
-
框架包打包运行；
-
应用操作日志；等等…
-
按步骤跟着学，关注我的都能学会，轻松独立开发Vue3+Electron+Vite桌面应用～文章末尾有惊喜！🎉
先给大家看看最终的应用成果，后续会一步步拆解实现：
一、搭建第一个electron-vite项目（核心步骤）
前提条件（必看！）
electron-vite对环境有明确要求，先确认你的环境符合：
-
Node.js 版本：20.19+ 或 22.12+（低于这个版本会报错）
-
Vite 版本：5.0+（后续会自动适配，无需手动安装）
如果Node.js版本不够，先去官网下载更新：Node.js官网
快速创建项目
运行以下任意一条命令（选自己常用的包管理器）：
# npm 方式（最常用）
npm create @quick-start/electron@latest
# yarn 方式
yarn create @quick-start/electron
# pnpm 方式
pnpm create @quick-start/electron
按提示选择配置（初学者直接照选！）
运行命令后会出现三个选项，一步步按下面选：
? Add TypeScript? » No
# 是否使用TypeScript？选No（本教程用JavaScript，简单易上手；熟悉TS的可以选Yes）
? Add Electron updater plugin? » Yes
# 是否添加自动更新插件？选Yes（后续打包后能支持应用自动更新，实用！）
? Enable Electron download mirror proxy? » Yes
# 是否开启下载代理？选Yes（国内网络必选，否则Electron包会下载失败）
运行项目（关键一步）
项目创建完成后，按以下步骤启动：
-
进入项目目录（命令行输入，注意替换成你的项目名，默认是electron-app）：
cd electron-app
-
安装依赖（耐心等几分钟，第一次安装会慢一点）：
# 用npm的话
npm install
# 用yarn的话
yarn install
# 用pnpm的话
pnpm install
-
启动项目：
# npm
npm dev
# yarn
yarn dev
# pnpm
pnpm dev
启动成功后，会自动弹出应用窗口，像这样：
到这里，你的第一个Electron+Vue3项目就搭建成功啦！是不是很简单～
二、项目框架目录解析（初学者必懂）
创建好的项目目录结构如下，重点记住三个核心文件夹：
核心目录说明（用通俗的话讲清楚，不用记专业术语）：
src->
|
|——> main // 主进程（相当于“指挥官”）
|
|——> preload // 预加载脚本（相当于“通讯员”）
|
|——> renderer // 渲染进程（相当于“展示员”）
1. main（主进程入口）
-
运行环境：Node.js环境（能直接操作电脑本地资源）
-
核心作用：创建应用窗口、控制应用生命周期（打开/关闭）、管理菜单、处理文件/系统操作等“底层功能”
-
简单说：它是应用的“大脑”，负责指挥所有核心操作
2. preload（预载脚本）
-
运行时机：在渲染进程加载页面之前
-
核心作用：安全地传递信息（比如渲染进程要调用电脑文件，通过它告诉主进程）
-
简单说：它是“通讯员”，避免渲染进程直接操作底层，保证应用安全
3. renderer（渲染进程）
-
运行环境：浏览器环境（和普通Vue项目一样）
-
核心作用：展示UI界面、处理用户交互（点击按钮、输入文字等）、路由管理
-
简单说：它是应用的“脸面”，我们看到的页面都在这里开发
三、重置架构文件（适配后续开发）
默认的配置有些不适合后续功能开发，我们稍微修改一下，同时理解每个参数的作用～
第一步：修改main文件（调整窗口配置）
找到 src/main/index.js，找到 createWindow 函数，把默认代码替换成下面的（复制粘贴即可）：
functioncreateWindow() {
// 创建应用窗口
const mainWindow = newBrowserWindow({
width: 350, // 窗口宽度（默认900，改小方便后续做小工具）
height: 450, // 窗口高度（默认670）
show: false, // 初始化时不显示窗口（后续可控制显示时机）
center: true, // 窗口打开后居中显示（人性化）
frame: true, // 显示窗口边框（方便拖动、关闭，后续可改无边框）
autoHideMenuBar: true, // 自动隐藏菜单栏（简洁）
icon, // 应用图标（默认已配置）
...(process.platform === 'linux' ? { icon } : {}), // 适配Linux系统
webPreferences: {
preload: join(__dirname, '../preload/index.js'), // 关联预加载脚本
nodeIntegration: true, // 允许渲染进程访问Node.js API（关键！后续要用到）
contextIsolation: false// 关闭上下文隔离（和上面的配置配合使用）
}
})
// 其他不改变
}
第二步：整理renderer文件（搭建Vue项目结构）
renderer文件夹就是我们熟悉的Vue项目，先整理目录方便后续开发：
-
进入
src/renderer/src，新建三个文件夹：-
common：存放公共组件、工具函数 -
router：存放路由配置（页面跳转） -
view：存放页面文件（如首页、登录页）
-
-
最终目录结构：
src/renderer/src->
|
|——> assets // 静态资源（图片、样式）
|
|——> components // 公共组件
|
|——> common // 工具
|
|——> router // 路由配置
|
|——> view // 页面文件
|
|——> App.vue// 根组件
|
|——> main.js// 入口文件
第三步：安装必要依赖（路由+UI组件）
-
安装Vue Router（页面跳转用）：
npm install vue-router@4 --save
# 或 yarn add vue-router@4
vue-router官网入口
-
安装UI组件库（ant-design-vue，美观又好用）：
npm install ant-design-vue@4.x --save
# 或 yarn add ant-design-vue@4.x
ant-design-vue官网入口
第四步：开发基础页面（首页+登录页）
-
替换App.vue代码（根组件）：
打开 src/renderer/src/App.vue，删除原有代码，粘贴下面的：
<template>
<!-- 配置ant-design-vue的弹窗容器 -->
<ConfigProvider:getPopupContainer="getPopupContainer">
<!-- 路由出口：页面内容会在这里显示 -->
<router-view />
</ConfigProvider>
</template>
<scriptsetup>
// 引入ant-design-vue核心组件
import { ConfigProvider } from'ant-design-vue'
// 配置弹窗挂载到body（避免样式错乱）
constgetPopupContainer = (el, dialogContext) => {
if (dialogContext) {
return dialogContext.getDialogWrap()
} else {
returndocument.body
}
}
</script>
<style>
/* 全局样式重置 */
{/* * {
margin: 0;
padding: 0;
box-sizing: border-box;
} */}
</style>
-
创建页面文件：
-
进入
src/renderer/src/view，新建my文件夹，再在里面新建login.vue（登录页）：
<template>
<div>
<h1>桌面端应用</h1>
<h2>欢迎登录</h2>
</div>
</template>
-
新建
home文件夹，再在里面新建index.vue（首页）：
<template>
<div >
<h2>首页</h2>
<p>后续功能会在这里开发～</p>
</div>
</template>
-
配置路由（页面跳转）：
进入 src/renderer/src/router，新建 index.js，粘贴下面的代码：
// 引入Vue Router核心函数
import { createRouter, createWebHashHistory } from'vue-router'
// 引入页面组件
importLoginfrom'@renderer/view/my/login.vue'
importHomefrom'@renderer/view/home/index.vue'
// 路由守卫：判断是否登录（简单版）
constcheckLogin = (to, from, next) => {
// 从本地存储获取登录信息，有就跳首页，没有就跳登录页
const loginInfo = window.localStorage.getItem('Electron_Login_Info')
loginInfo ? next() : next('/login')
}
// 路由规则
const routes = [
{
path: '', // 默认路径
redirect: '/login'// 自动跳转到登录页
},
{
path: '/login', // 登录页路径
name: 'Login',
component: Login// 对应登录页组件
},
{
path: '/home', // 首页路径
name: 'Home',
component: Home, // 对应首页组件
// beforeEnter: checkLogin // 进入前验证登录
}
]
// 创建路由实例
const router = createRouter({
history: createWebHashHistory(), // 哈希模式（带#的URL）
routes // 应用路由规则
})
exportdefault router
-
更新main.js（入口文件配置）：
打开 src/renderer/src/main.js，替换原有代码：
// 引入全局样式
import'./assets/main.css'
// 引入ant-design-vue和样式
importAntdfrom'ant-design-vue'
import'ant-design-vue/dist/reset.css'
// 引入路由
import router from'./router'
// 引入Vue核心
import { createApp } from'vue'
importAppfrom'./App.vue'
// 创建Vue应用
const app = createApp(App)
// 使用路由
app.use(router)
// 使用ant-design-vue
app.use(Antd)
// 挂载到页面
app.mount('#app')
第五步：运行查看效果
再次执行启动命令：
npm dev # 或 yarn dev / pnpm dev
启动后会看到登录页，手动在URL后面加 /home（比如 http://localhost:5173/#/home），会自动跳回登录页（路由守卫生效），效果如下：
小结
第一期的搭建步骤到这里就结束啦！我们已经完成了：
-
环境配置和项目创建；
-
核心目录的理解；
-
窗口配置、路由、UI组件的基础搭建；
-
成功运行出登录页和首页。
下一篇《桌面端应用搭建：步骤二》会教大家实现项目布局菜单，让应用更有“桌面端”的样子～ 记得关注不迷路！
福利时间
我组建了一个氛围超棒的 「Vue3+Electron+Vite学习社群」，里面有很多正在学习的小伙伴，大家一起交流问题、分享经验、共建项目～
如果你对Vue3+Electron+Vite开发感兴趣，想跟着大家一起学习进步，关注公众号「 前端早间课 」 回复 「 桌面端 」 就能加入啦！
公众号连接：
https://mp.weixin.qq.com/s/r0WyaeAts2CZNQYo16Gt9g
总结：
前端路上 | 所知甚少，唯善学。
各位小伙伴有什么疑问，欢迎留言探讨。
--- ✨关注我：前端路上不迷路 ---
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
16
0- 0
已为社区贡献3条内容
所有评论(0)