2025最新款原创新作electron38+vite7+vue3 setup+pinia3仿微信客户端聊天程序。

技术知识点

• 跨平台框架：electron38.0.0
• 前端框架：vite7.1.2+vue3.5.18+vue-router4.5.1
• 组件库：element-plus^2.11.2
• 状态插件：pinia^3.0.3
• 存储插件：pinia-plugin-persistedstate^4.5.0
• 打包构建：electron-builder^24.13.3
• electron结合vite插件：vite-plugin-electron^0.29.0

基于最新版跨平台技术electron38+vite7搭建项目模板，整个项目使用vue3 setup语法糖编码开发。

项目通用模板

<template>
  <template v-if="!route?.meta?.isNewWin">
    <div
      class="vu__container flexbox flex-alignc flex-justifyc"
      :style="{'--themeSkin': appstate.config.skin}"
    >
      <div class="vu__layout flexbox flex-col">
        <div class="vu__layout-body flex1 flexbox" @contextmenu.prevent>
          <!-- 菜单栏 -->
          <slot v-if="!route?.meta?.hideMenuBar" name="menubar">
            <MenuBar />
          </slot>

          <!-- 侧边栏 -->
          <div v-if="route?.meta?.showSideBar" class="vu__layout-sidebar flexbox">
            <aside class="vu__layout-sidebar__body flexbox flex-col">
              <slot name="sidebar">
                <SideBar />
              </slot>
            </aside>
          </div>

          <!-- 主内容区 -->
          <div class="vu__layout-main flex1 flexbox flex-col">
            <ToolBar v-if="!route?.meta?.hideToolBar" />
            <router-view v-slot="{ Component, route }">
              <keep-alive>
                <component :is="Component" :key="route.path" />
              </keep-alive>
            </router-view>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-else>
    <WinLayout />
  </template>
</template>

基于uniapp+vue3+uvue短视频+聊天+直播app系统

基于uniapp+vue3+deepseek+markdown搭建app版流式输出AI模板

vue3.5+deepseek+arco+markdown搭建web版流式输出AI模板

unios-admin手机版后台|uniapp+vue3全端admin管理系统

基于flutter3.32+window_manager仿macOS/Wins风格桌面os系统

flutter3.27+bitsdojo_window电脑端仿微信Exe应用

自研tauri2.0+vite6.x+vue3+rust+arco-design桌面版os管理系统Tauri2-ViteOS

基于uni-app+vue3+uvui跨三端仿微信app聊天模板

Flutter3.x深度融合短视频+直播+聊天app实例

原创electron31+vite5.x+elementPlus桌面端后台管理系统

自研tauri2.0+vite5+vue3+element-plus电脑版exe聊天系统Vue3-Tauri2Chat

安装electron

//指定版本可以改为 npm install --save-dev electron@22.3.0
npm install --save-dev electron

安装失败 RequestError: connect ETIMEDOUT 20.205.243.166:443

npm error code 1
npm error path E:\project\work\xxx\xxx\node_modules\electron
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm error RequestError: connect ETIMEDOUT 20.205.243.166:443
npm error     at ClientRequest.<anonymous> (E:\project\work\xxx\xxx\node_modules\got\dist\source\core\index.js:970:111)
npm error     at Object.onceWrapper (node:events:623:26)
npm error     at ClientRequest.emit (node:events:520:35)
npm error     at origin.emit (E:\project\work\xxx\xxx\node_modules\@szmarczak\http-timer\dist\source\index.js:43:20)
npm error     at emitErrorEvent (node:_http_client:107:11)
npm error     at TLSSocket.socketErrorListener (node:_http_client:574:5)
npm error     at TLSSocket.emit (node:events:508:28)
npm error     at emitErrorNT (node:internal/streams/destroy:170:8)
npm error     at emitErrorCloseNT (node:internal/streams/destroy:129:3)
npm error     at process.processTicksAndRejections (node:internal/process/task_queues:90:21)
npm error     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1637:16)
npm error A complete log of this run can be found in: C:\Users\xxx\AppData\Local\npm-cache\_logs\2025-09-08T10_00_30_300Z-debug-0.log

解决：

• 安装 pnpm

npm install -g pnpm

• 安装 pnpm 失败，执行如下命令

npm install -g pnpm --registry=https://registry.npmmirror.com

• 或者设置pnpm使用国内镜像源（配置后建议关闭终端后再重新打开新的终端）

pnpm config set registry https://registry.npmmirror.com

• 查看当前的 registry 镜像

npm config get registry

• 或者在根目录配置 .npmrc 文件，可以确保大部分走国内镜像
• 内容如下

registry=https://registry.npmmirror.com
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
PUPPETEER_DOWNLOAD_HOST=https://npmmirror.com/mirrors

• 如果无法安装pnpm，考虑下载最新版 Node.js
• 用 pnpm 来安装 electron

pnpm install electron --save-dev

• 安装继续失败报错：ssh: connect to host github.com port 22: Connection timed out

• 配置Git对GitHub使用HTTPS协议

• 一定要加 --add 不然会被覆盖

# 配置Git对GitHub使用HTTPS协议
# 这将使Git在获取GitHub仓库时使用HTTPS而不是SSH
git config --global --add url."https://github.com/".insteadOf git@github.com:

# 或者专门针对GitHub配置
git config --global --add url."https://github.com/".insteadOf ssh://git@github.com/

• 配置后用如下命令检查是否设置成功

git config --global --list

• 你应该看到 两条规则：

url.https://github.com/.insteadof=ssh://git@github.com/
url.https://github.com/.insteadOf=git@github.com:

• git配置成功后一定要关闭当前的终端，重新开一个终端，再去安装 electron

npm install

#或者
pnpm install

#等等命令
...