Skip to content

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

License

Notifications You must be signed in to change notification settings

ziyoren/electron-vite-vue2

Repository files navigation

electron-vite-vue2

GitHub Repo stars vue vite electron electron-builder

一个简单、高效的桌面应用开发样板工程,由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                   #打包发布的应用在这个目录里

国内镜像配置

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

  1. 打开npm配置文件
npm config edit
  1. 在空白处添加下面配置内容
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/
  1. 安装依赖
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中国镜像站

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages