{"id":26705088,"url":"https://github.com/lceric/electron-vue-template","last_synced_at":"2025-09-04T00:09:18.112Z","repository":{"id":51784100,"uuid":"228722721","full_name":"lceric/electron-vue-template","owner":"lceric","description":"The boilerplate for making electron applications built with vue-cli3 scaffolding and electron-quick-start","archived":false,"fork":false,"pushed_at":"2021-06-07T06:51:38.000Z","size":534,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T05:35:16.188Z","etag":null,"topics":["electron-application","electron-builder","electron-vue-tpl","electronjs","vue","vue-cli3-scaffolding"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lceric.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-18T00:03:13.000Z","updated_at":"2021-06-07T06:51:41.000Z","dependencies_parsed_at":"2022-08-22T20:00:27.281Z","dependency_job_id":null,"html_url":"https://github.com/lceric/electron-vue-template","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lceric%2Felectron-vue-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lceric%2Felectron-vue-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lceric%2Felectron-vue-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lceric%2Felectron-vue-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lceric","download_url":"https://codeload.github.com/lceric/electron-vue-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248731223,"owners_count":21152791,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron-application","electron-builder","electron-vue-tpl","electronjs","vue","vue-cli3-scaffolding"],"created_at":"2025-03-27T05:33:19.026Z","updated_at":"2025-04-13T14:40:36.025Z","avatar_url":"https://github.com/lceric.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## electron-vue-template\nThe boilerplate for making electron applications built with vue-cli3 scaffolding。\n\n一个`electron`模板，使用了`vue-cli3`脚手架搭建。\n\n\u003cdiv align=\"center\"\u003e\n  \u003cbr\u003e\n    \u003cimg width=\"218\" src=\"/electron/icon/electron-vue-template.png\" alt=\"electron-vue-template\"\u003e\n    \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n*****\n### Install\n\n```bash\n# Clone the repository\ngit clone https://github.com/lichao-eric/electron-vue-template.git\n\n# Go into the repository\ncd electron-vue-template\n\n# Install dependencies\nnpm install\n\n# Run the app\nnpm run dev\n\n# Pack the app, windows-msi, mac-dmg\nnpm run pack\n```\n\n*****\n\n### Develop\n\n#### electron\n\nelectron fold：\n\n```bash\n|-- electron\n  |-- const\n    |-- config                              # electron mainwindow configs\n  |-- bin\n  |-- core\n    |-- ipc.js                            # window控制ipc\n    |-- logs.js                           # 日志设置\n    |-- update.js                         # 更新\n  |-- helper\n    |-- window.js                         # window窗口工具方法\n  |-- icon\n      |-- electron-vue-template.png           # app icon, config package.json\n  |-- app.js                             # main window\n  ...\n\n```\n\nelectron目录(暂定为electron的开发目录),electron的[官方文档](https://electronjs.org/docs/tutorial/quick-start)\n\n\n#### vue\n\nSame as Vue development mode\n\n*****\n\n### Pack Config 打包构建配置\n\n```json\n  \"build\": {\n    \"productName\": \"electron-vue-template\",\n    \"appId\": \"com.electron.vue.template.app\",\n    \"mac\": {\n      \"target\": \"dmg\",\n      \"icon\": \"electron/icon/electron-vue-template.png\"\n    },\n    \"win\": {\n      \"target\": \"msi\",\n      \"icon\": \"electron/icon/electron-vue-template.png\"\n    }\n  }\n```\n\n`productName`: app name 应用名称\n\n`icon`: app icon 应用icon\n\nmore information [electron-builder](https://www.electron.build/configuration/configuration)\n\n更多打包配置项，可以查看[electron-builder文档](https://www.electron.build/configuration/configuration)\n\n*****\n\n## 补充说明\n\n#### 1. 迁移已有的vue项目到该项目，打包后页面一直空白，可能是什么导致的？\n\n可以本地直接打开，如果资源加载不报错，可以看一下路由是不是使用了`history`, 如果是，可以改成`hash`试一下\n\n#### 2. 该工程的流程描述\n\n##### 开发模式\n\n\u003e 主要点就是webpack启动的vue工程与electron的结合\n\n简单来说就是`webpack启动vue工程 -\u003e 在devServer的钩子中启动electron`，热更新代码\n\n##### 构建过程\n\n\u003e electron打入静态页面及资源文件\n\n`webpack打包生成静态资源目录webroot -\u003e electron打包引用webroot目录`，生成dmg/msi安装包\n\n#### 3. 改了`electron/*`目录文件不生效?\n\n暂未支持该目录热更新，可以通过watch该目录，重新启动electron来实现\n\n#### 4. vue工程启动端口设定\n\n在`package.json`中有`development`模块，可以看到`port`，配置一下重启即可。\n\n\n#### 5. 怎么制定打包后的安装包文件名\n\n现安装包的文件命名规则为： package.json中`productName+versions版本号`\n\n#### 6. 如何配置打包后的文件类型\n\n工程打包使用的是`electron-builder`,默认配置`msi`,`dmg`。\n\n如果需要配置`linux`平台与安装包可以查看[electron-builder文档](https://www.electron.build/configuration/configuration)\n\n*****\n\n### Dependencies 部分依赖\n\n在vue-cli3脚手架基础上，与[electron-quick-start](https://github.com/electron/electron-quick-start)结合构建。\n\n1. `electron`: electron app;\n\n2. `electron-builder`: pack the electron app;\n\n3. `vue`: `vue`, `vue-router`.etc\n\n4. `webpack`: develop and build the vue codes;\n\n...\n\nshow `package.json`\n\n\u003chr\u003e\n\n## Resources for Learning Electron\n\n- [electronjs.org/docs](https://electronjs.org/docs) - all of Electron's documentation\n- [electronjs.org/community#boilerplates](https://electronjs.org/community#boilerplates) - sample starter apps created by the community\n- [electron/electron-quick-start](https://github.com/electron/electron-quick-start) - a very basic starter Electron app\n- [electron/simple-samples](https://github.com/electron/simple-samples) - small applications with ideas for taking them further\n- [electron/electron-api-demos](https://github.com/electron/electron-api-demos) - an Electron app that teaches you how to use Electron\n- [hokein/electron-sample-apps](https://github.com/hokein/electron-sample-apps) - small demo apps for the various Electron APIs\n\n*****\n\n## License\n\n[Electron CC0 1.0 (Public Domain)](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flceric%2Felectron-vue-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flceric%2Felectron-vue-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flceric%2Felectron-vue-template/lists"}