electron-vue-template

• 使用 Vue.js + Electron 快速开发跨平台桌面应用及web应用

npm 下载源 https://registry.npm.taobao.org/

脚本说明

1. git clone https://github.com/Liting1/electron-vue-template.git
2. npm install 安装项目所需依赖
3. npm start 本地开发桌面应用 electron + vue3
4. npm run build 使用 electron-builder 打包桌面应用
5. npm run publish 快速构建版本,自动递增版本号,需要保证git 工作区域是干净的，才能够运行
6. npm run web-serve 在本地浏览器开发渲染进程作为web应用
7. npm run web-build 构建打包web应用
8. npm run packager-build 使用 electron-packager 打包生产
9. npm run lint 查看项目当前的所有eslint 错误
10. npm run lintFix 修复当前项目的所有eslint 错误

说明：

运行命令中的 env 参数表示应用程序的使用环境，包含开发环境(dev)、测试环境(test)、体验环境(exp)、生产环境(pro)。

运行命令中的 mode 产生表示运行模式, 包含开发模式(development)、生产模式(production)。对应与webpack配置中的mode选项

功能

1. 热加载开发
2. 打包生成App.exe 文件
3. 应用更新
4. vue3 + typescript 全家桶
5. 同时支持 sass/scss
6. ts-node 支持使用 ts编写渲染进程和主进程代码
7. 支持 vue-devtools 调试

常见问题

1. 打包应用程序时需要下载 electron-v18.2.0-win32-x64.zip 文件，下载速度很慢，下载失败。

window系统，可以将 electron-v18.2.0-win32-x64.zip 已经下载好的文件直接复制到 C:\Users\liting\AppData\Local\electron\Cache文件夹下, 注：第二个目录时对应用户的目录，每个人的可能不一样

2. electron是其他版本的可以选择从该链接下载：https://npm.taobao.org/mirrors/electron/ electron打包所需文件所有版本下载地址

3. 下载安装依赖时如果比较慢，或者是使用npm下载electron依赖比较慢 可以使用 cnpm 从新下载依赖,

4. 若在使用cnpm 安装依赖完毕运行后出现vuex报错，请查看实际下载的版本是否和package.json 中的版本号是否一样，如果不一样则单独指定vuex版本从新下载

5. 若在安装过程中出现360警告或者是什么病毒的全部忽略，全都允许

6. 若在运行打包时候出现如下错误Error: Cannot find module 'fs/promises' 则需要将本地的node版本升级到 14+ 以上版本方可解决

7. prettier 配置进行修改时需要重启编辑器才能生效

8. 注： 添加新窗口的预加载文件必须放在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配置文件

代办

2. 打包构建优化
3. 原生模块构建
4. 自动更新
5. 项目可配置化
6. 性能及安全问题