131 lines
4.3 KiB
Markdown
131 lines
4.3 KiB
Markdown
|
# electron-app
|
|||
|
|
|
|||
|
|
- [Vue3](https://cn.vuejs.org) + [ElementPlus](https://element-plus.org/zh-CN/) + [electron-vite](https://cn-evite.netlify.app/) + [Electron](https://www.electronjs.org/zh/)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 安装
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
$ npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 启动
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
$ npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 打包
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# For windows
|
|||
|
|
$ npm run build:win
|
|||
|
|
|
|||
|
|
# For macOS
|
|||
|
|
$ npm run build:mac
|
|||
|
|
|
|||
|
|
# For Linux
|
|||
|
|
$ npm run build:linux
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 项目目录结构
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
├── build // 编译过程输出文件目录
|
|||
|
|
├── dist // 打包后输出目录
|
|||
|
|
├── node_modules // 依赖模块
|
|||
|
|
├── out //编译过程输出文件目录
|
|||
|
|
├── resources // 公共资源文件，主进程使用
|
|||
|
|
│ └── icon.png //默认图标
|
|||
|
|
├──src
|
|||
|
|
│ ├── main // 主进程开发目录
|
|||
|
|
│ │ └── index.js //主进程入口文件
|
|||
|
|
│ ├── preload // 预加载脚本开发目录
|
|||
|
|
│ │ └── index.js // 预加载默认脚本
|
|||
|
|
│ └── renderer // 渲染进程开发目录，类似纯web项目根目录
|
|||
|
|
│ ├── src
|
|||
|
|
│ │ ├── assets //资源文件目录
|
|||
|
|
│ │ ├── components //组件目录
|
|||
|
|
│ │ ├── App.vue // 入口页面
|
|||
|
|
│ │ └── main.js // 入口文件
|
|||
|
|
│ └── index.js.html // 默认html文件
|
|||
|
|
├── .editorconfig
|
|||
|
|
├── .eslintignore //eslint代码检查忽略配置文件
|
|||
|
|
├── .eslintrc.cjs //eslint代码检查配置文件
|
|||
|
|
├── .gitignore //git忽略配置文件
|
|||
|
|
├── .npmrc // npm源配置文件
|
|||
|
|
├── .prettierignore //prettier代码格式化忽略配置文件
|
|||
|
|
├── .prettierrc.yaml //prettier代码格式化配置文件
|
|||
|
|
├── dev-app-update.yml
|
|||
|
|
├── electron-builder.yml //打包配置文件
|
|||
|
|
├── electron.vite.config.mjs //electron-vite配置文件
|
|||
|
|
├── package-lock.json
|
|||
|
|
├── package.json
|
|||
|
|
└── README.md //项目说明
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### electron-builder.yml配置说明
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
appId: com.electron.test //appid 包名
|
|||
|
|
productName: 测试程序 //安装程序的名字
|
|||
|
|
directories:
|
|||
|
|
buildResources: build
|
|||
|
|
files:
|
|||
|
|
- '!**/.vscode/*'
|
|||
|
|
- '!src/*'
|
|||
|
|
- '!electron.vite.config.{js,ts,mjs,cjs}'
|
|||
|
|
- '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
|
|||
|
|
- '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
|
|||
|
|
- '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
|
|||
|
|
asarUnpack:
|
|||
|
|
- resources
|
|||
|
|
win:
|
|||
|
|
executableName: 测试程序
|
|||
|
|
icon: build/icon/favicon.ico //程序图标
|
|||
|
|
nsis:
|
|||
|
|
oneClick: false //是否一键安装
|
|||
|
|
allowElevation: true //允许请求提升。若为false，则用户必须使用提升的权限重新启动安装程序。
|
|||
|
|
allowToChangeInstallationDirectory: true //是否允许修改安装目录
|
|||
|
|
createDesktopShortcut: true //卸载时图标
|
|||
|
|
createStartMenuShortcut: true // 是否创建开始菜单图标
|
|||
|
|
runAfterFinish: false //是否安装完成后运行
|
|||
|
|
include: ../build/script/installer.nsh //我这里放的是将应用程序默认安装在哪个路径
|
|||
|
|
artifactName: ${name}-${version}-setup.${ext}
|
|||
|
|
uninstallDisplayName: ${productName}
|
|||
|
|
installerIcon: ./build/icon.ico // 安装时图标
|
|||
|
|
uninstallerIcon: ./build/icon.ico
|
|||
|
|
mac:
|
|||
|
|
entitlementsInherit: build/entitlements.mac.plist
|
|||
|
|
extendInfo:
|
|||
|
|
- NSCameraUsageDescription: Application requests access to the device's camera.
|
|||
|
|
- NSMicrophoneUsageDescription: Application requests access to the device's microphone.
|
|||
|
|
- NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
|
|||
|
|
- NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
|
|||
|
|
notarize: false
|
|||
|
|
dmg:
|
|||
|
|
artifactName: ${name}-${version}.${ext}
|
|||
|
|
linux:
|
|||
|
|
target:
|
|||
|
|
- AppImage
|
|||
|
|
- snap
|
|||
|
|
- deb
|
|||
|
|
maintainer: electronjs.org
|
|||
|
|
category: Utility
|
|||
|
|
appImage:
|
|||
|
|
artifactName: ${name}-${version}.${ext}
|
|||
|
|
npmRebuild: false
|
|||
|
|
publish:
|
|||
|
|
provider: generic
|
|||
|
|
url: https://example.com/auto-updates //程序升级的验证地址
|
|||
|
|
electronDownload:
|
|||
|
|
mirror: https://npmmirror.com/mirrors/electron/
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|