- 使用 Vue.js + Electron 快速开发跨平台桌面应用及web应用
npm 下载源 https://registry.npm.taobao.org/
git clone https://github.com/Liting1/electron-vue-template.git
npm install
安装项目所需依赖npm start
本地开发桌面应用 electron + vue3npm run build
使用 electron-builder 打包桌面应用npm run publish
快速构建版本,自动递增版本号,需要保证git 工作区域是干净的,才能够运行npm run web-serve
在本地浏览器开发渲染进程作为web应用npm run web-build
构建打包web应用npm run packager-build
使用 electron-packager 打包生产npm run lint
查看项目当前的所有eslint 错误npm run lintFix
修复当前项目的所有eslint 错误
说明:
运行命令中的 env 参数表示应用程序的使用环境,包含开发环境(dev)、测试环境(test)、体验环境(exp)、生产环境(pro)。
运行命令中的 mode 产生表示运行模式, 包含开发模式(development)、生产模式(production)。对应与webpack配置中的mode选项
- 热加载开发
- 打包生成App.exe 文件
- 应用更新
- vue3 + typescript 全家桶
- 同时支持 sass/scss
- ts-node 支持使用 ts编写渲染进程和主进程代码
- 支持 vue-devtools 调试
- 打包应用程序时需要下载 electron-v18.2.0-win32-x64.zip 文件,下载速度很慢,下载失败。
window系统,可以将 electron-v18.2.0-win32-x64.zip 已经下载好的文件直接复制到
C:\Users\liting\AppData\Local\electron\Cache
文件夹下, 注:第二个目录时对应用户的目录,每个人的可能不一样
-
electron是其他版本的可以选择从该链接下载:https://npm.taobao.org/mirrors/electron/ electron打包所需文件所有版本下载地址
-
下载安装依赖时如果比较慢,或者是使用npm下载electron依赖比较慢 可以使用 cnpm 从新下载依赖,
-
若在使用cnpm 安装依赖完毕运行后出现vuex报错,请查看实际下载的版本是否和package.json 中的版本号是否一样,如果不一样则单独指定vuex版本从新下载
-
若在安装过程中出现360警告或者是什么病毒的全部忽略,全都允许
-
若在运行打包时候出现如下错误
Error: Cannot find module 'fs/promises'
则需要将本地的node版本升级到 14+ 以上版本方可解决 -
prettier 配置进行修改时需要重启编辑器才能生效
-
注: 添加新窗口的预加载文件必须放在
preloadScript
目录格式必须是preloadScript/文件夹/index.ts
的方式,webpack 会自动打包对应的index.ts 文件
|—— app 项目打包后输出的源文件目录
|—— pack 打包成App的输出目录
|—— scripts webpack 构建应用配置目录
|—— doc 项目文档和所需文件目录
|—— config 应用打包配置目录
|—— src 项目资源目录
| |—— main 主线程文件目录
| | |—— createWindow 创建窗口目录
| | |—— plugin 插件目录
| | |—— preloadScript 窗口预加载文目录
| | |—— registerEvent 注册事件的目录
| | |—— shortcut 注册快捷键目录
| | |—— sql sql.js 目录
| | |—— tray 托盘目录
| | |—— utils 工具目录
| | |—— main.ts 主线程入口文件
| |—— pages 其他渲染页面--子窗口页面
| |—— renderer 主渲染线程目录
| | |—— api 接口目录
| | |—— assets 图片资源目录
| | |—— components 通用组件目录
| | |—— router 路由目录
| | |—— mock mock数据目录
| | |—— store 仓库目录
| | |—— utils 工具库目录
| | |—— views 页面目录
| | |—— App.vue vue根组件
| | |—— index.html 渲染进程html模板文件
| | |—— index.ts 渲染进程入口文件
| |—— static 静态资源目录
|—— .editorconfig 编辑器配置文件
|—— .eslintignore eslint-ignore配置文件
|—— .eslintrc eslint配置文件
|—— .gitignore git 配置文件
|—— package-lock.json 包版本锁定文件
|—— package.json 包版本管理文件
|—— README.md 项目说明文件
|—— shims-vue.d.ts ts解注 .vue 文件
|—— tsconfig.json ts配置文件
- 打包构建优化
- 原生模块构建
- 自动更新
- 项目可配置化
- 性能及安全问题