一个简单、高效的桌面应用开发样板工程,由Electron、Vite、Vue2等组成。集成了vue devtools工具,方便大家调试。
-
使用JavaScript,HTML和CSS构建跨平台的桌面应用程序。
-
主进程支持所有的Node.JS API。
-
高性能的Chromium展示您的网页,让您的应用运行更流畅。
-
极速的服务启动、轻量快速的热重载,让您的开发效率更快。
-
易用、灵活、高效的VUE,丰富的生态支持。
克隆本项目
git clone git@github.com: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 #打包发布的应用在这个目录里
国内访问请配置镜像地址,否则可能会下载失败
- 打开npm配置文件
npm config edit
- 在空白处添加下面配置内容
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/
- 安装依赖
npm install
构建时,如遇到无法下载electron相关的包,可以到npmmirror.com镜像站下载后放在缓存目录中。
各操作系统包的位置如下:
-
macOS
~/Library/Caches/electron-builder -
linux
~/.cache/electron-builder -
windows
%LOCALAPPDATA%\electron-builder\cache