{"id":16391881,"url":"https://github.com/williamfzc/basedesktopapp","last_synced_at":"2025-03-21T02:32:15.787Z","repository":{"id":113370695,"uuid":"142265201","full_name":"williamfzc/BaseDesktopApp","owner":"williamfzc","description":"electron + vue + element = cool desktop app","archived":false,"fork":false,"pushed_at":"2020-07-07T04:09:13.000Z","size":884,"stargazers_count":88,"open_issues_count":3,"forks_count":64,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-17T19:52:29.532Z","etag":null,"topics":["electron","electron-vue-element","gui","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/williamfzc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-25T07:40:10.000Z","updated_at":"2025-01-05T14:52:20.000Z","dependencies_parsed_at":"2023-06-15T11:15:06.385Z","dependency_job_id":null,"html_url":"https://github.com/williamfzc/BaseDesktopApp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamfzc%2FBaseDesktopApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamfzc%2FBaseDesktopApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamfzc%2FBaseDesktopApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamfzc%2FBaseDesktopApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/williamfzc","download_url":"https://codeload.github.com/williamfzc/BaseDesktopApp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244725582,"owners_count":20499632,"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","electron-vue-element","gui","vue"],"created_at":"2024-10-11T04:47:38.009Z","updated_at":"2025-03-21T02:32:15.782Z","avatar_url":"https://github.com/williamfzc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Base Desktop App\n\n\u003e electron + vue + element UI = excellent desktop app\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\n为你的工具快速构建一个界面\n\n![](./pic/basedesktop_desc.png)\n\n## 写在前面（2020.6.6）\n\n- 这个项目已经是两年前的东西了，两年可以改变的事情太多，何况是在日日新的前端。所以你会看到很多依赖可能会报deprecated的warning，但暂时不影响使用；\n- 需要注意，element ui目前的维护积极性已经不太高，vue也会逐渐往3切换；\n- 这套设计本质上反映了一个概念是，利用electron构建桌面，用terminal/cli来作为交互中介，与backend交互；\n- 这很明显会导致的问题就是它与系统的耦合依旧过高，你需要自行处理诸如路径之类的问题；\n- 如果你希望构建一个认真的app，我更推荐你参考 [传统的client/server概念](https://github.com/fyears/electron-python-example)，但很遗憾这个库也已经被弃用了；\n- 我不是专职的前端工程师，编写这个项目也只是做一个概念设计，我更希望你能从中得到一些概念上的启发，带着自己的思考去设计更好的程序；\n- 当然，这并不代表这个库不能用，如果你只是想构建小工具，那么它也是一个选择；\n- Have fun :)\n\n## 目的\n\n- 在日常工作中，经常需要开发一些小工具用于简化流程以提升开发效率\n- 这些小工具通常都比较零碎，需要一个有效的手段将他们聚合在一起，这种手段通常是GUI\n- 而GUI的开发是很繁琐的，如果投入很多时间到开发GUI上难免本末倒置。而语言原生的GUI通常都非常丑\n- 这套模板针对这种情况被设计出来\n\n## 选型\n\n- electron 将前端技术应用到桌面应用的开发中，利用前端技术开发桌面应用成为可能\n- vue 大大降低了前端入门门槛，让其他方向的工程师也能够快速上手\n- element UI 作为vue系列中知名的组件库，让工程师也能够独立开发出美观的界面\n- node 环境提供了与系统交互的能力，能够整合其他已有的工具\n\n## 设计\n\n- 标题栏仿照MacOS制作，在全平台上表现一致\n- 美观的加载动画与通知弹窗，可以根据需要进行定制\n- 使用方法尽量简单，让开发者能够把更多的精力放在工具本身而不是GUI上\n\n## 使用\n\n建议是直接fork到自己的github使用，然后就可以随便玩了（？\n\n### 安装依赖\n\n``` bash\nnpm install\n```\n\n### 运行\n\n在环境配置完毕之后，执行：\n\n```\nnpm run dev\n```\n\n如果环境没有错误的话，应该可以看到app已经被正常拉起了。\n\n### 如何关联现有的工具\n\n首先我们需要新增一个页面：\n\n- 在pages中新增vue文件，例如新增一个example模块：\n    - 创建example文件夹\n    - 在里面创建Example.vue文件\n- 在components/SideBar.vue中仿照其他项目新增\n    - `\u003cel-menu-item index=\"/example\"\u003e\u003ci class=\"el-icon-edit\"\u003e\u003c/i\u003e例子\u003c/el-menu-item\u003e`\n- 在router/index.js中仿照其他项目新增\n    - `{path: '/example', component: 'Example'},`\n\n这样就可以看到在侧边栏中已经有新增的项目了。\n\n假设我们需要加入的是一个 python 脚本（比如放置在根目录的 example文件夹 中），你只需要在 `Example.vue` 下新增方法：\n\n```js\nthis.$execCmd(\n    // 命令行怎么运行它就怎么写\n    `python ./example/example.py`,\n    // 加载动效的文字\n    \"运行python example :)\",\n    // 结果存放，如果按默认设定，在执行完成后： \n    // `this['cmdResult'] = result`\n    'cmdResult',\n)\n```\n\n然后点击运行：\n\n![](./pic/basedesktop_run_example.gif)\n\n就可以啦！\n\n## 依赖项目\n\n- [Electron](https://electronjs.org)\n- [Vue](https://cn.vuejs.org)\n- [ElementUI](http://element.eleme.io/#/zh-CN)\n\n## BUG与建议\n\n欢迎issue。（也欢迎star/fork\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliamfzc%2Fbasedesktopapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwilliamfzc%2Fbasedesktopapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliamfzc%2Fbasedesktopapp/lists"}