chenfromnb / electron-vite-vue2

一个简单、高效的桌面应用开发样板工程，由Electron、Vite、Vue2等组成。集成了vue devtools工具，方便大家调试。

electron-vite-vue2

一个简单、高效的桌面应用开发样板工程，由Electron、Vite、Vue2等组成。集成了vue devtools工具，方便大家调试。

特色

• 使用JavaScript，HTML和CSS构建跨平台的桌面应用程序。

• 主进程支持所有的Node.JS API。

• 高性能的Chromium展示您的网页，让您的应用运行更流畅。

• 极速的服务启动、轻量快速的热重载，让您的开发效率更快。

• 易用、灵活、高效的VUE，丰富的生态支持。

开始使用

克隆本项目

git clone [email protected]:ziyoren/electron-vite-vue2.git

进入项目目录

cd electron-vite-vue2

安装依赖

npm install

开始开发

npm start

打包发布

npm run release

目录结构

├── README.md              
├── build
│   └── icons
│       ├── 256x256.png
│       ├── icon.icns
│       └── icon.ico
├── electron
│   └── index.js              #electron的入口文件
├── electron-builder.json     #打包组件electron-builder的配置文件
├── favicon.svg
├── index.html                #Vue的入口模板文件
├── package.json
├── src                       #Vue的代码目录，就在这里写前端界面
│   ├── App.vue
│   ├── main.js
│   ├── router                #Vue的路由
│   │   └── index.js
│   └── views
│       ├── About.vue
│       └── Home.vue
├── vite.config.js            #Vite的配置文件
├── vue-devtools              #集成Vue-devtools6.1.3 方便您调试Vue项目
├── dist                      #编译Vue时生成的目录
└── release                   #打包发布的应用在这个目录里

国内镜像配置

国内访问请配置镜像地址，否则可能会下载失败

1. 打开npm配置文件

npm config edit

2. 在空白处添加下面配置内容

electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
electron_custom_dir={{ version }}
electron_mirror=https://cdn.npmmirror.com/binaries/electron/v
registry=https://registry.npmmirror.com/

3. 安装依赖

npm install

包下载问题

构建时，如遇到无法下载electron相关的包，可以到npmmirror.com镜像站下载后放在缓存目录中。

各操作系统包的位置如下：

• macOS ~/Library/Caches/electron-builder

• linux ~/.cache/electron-builder

• windows %LOCALAPPDATA%\electron-builder\cache

相关链接

Electron官网

Vue官网

Vue.js视频教程

ViteJS官网

npmmirror.com**镜像站