pure-peace / vue-cli-electron-template Goto Github PK

using vue-cli4 and Electron built a modular template, including vue-router, i18n, axios, electron-builder and more. / 用vue-cli4和Electron 构建模块化的桌面应用程序模板，集成了常用插件。

License: MIT License

JavaScript 69.43% HTML 1.99% Vue 28.58%

electron vue vue-cli i18n axios vue-router electron-builder vuex electron-template electron-vue

vue-cli-electron-template's Introduction

🔥vue-cli-electron-template

⭐ Using vue-cli 4 and Electron 11.x built a modular desktop application template.

The directory structure is clear and the main process (electron) is separated from the rendering process (vue), which is easy to extend and manage.

Fast packaging, one-click multi-language switch. Use custom borderless windows, has added easy-to-use svg icon components, and axios , vuex, vue-router, vue-i18n and global bus bus, out of the box, project extremely fast start.

English / 💖 中文
Simple document

Release Notes:

v0.3.0: Old version. But some dependencies were upgraded and minor refactoring was done.
v1.0.0: After refactoring. Clearer directory structure. Also fix the problem of tray setting icon under MacOS.
v2.0.0: Electron 11.x version

Detailed:

Custom borderless windows.
Clear directory structure with modular design. Separation of main process (Electron) and rendering process (Vue), easy to extend and manage.
Fully support multiple languages and switch freely.
svg icon component, you can freely add and use svg icons, very easy
Electron: contains some demos.
vue-i18n：Added language switching demo, including language switching for Electron native components.
Wrapped axios, Api interface is separated from the requester for easy management.
Use ESlint for code style specification.
Added vuex, vue-router, and a handy global bus bus.

The project does not add any third-party ui libraries, so you can add as many as you like.

📷 Screenshots:

🏆 Start

Choose either yarn or npm

🍬 Clone

git clone https://github.com/Pure-Peace/vue-cli-electron-template

cd vue-cli-electron-template

🍙 Install

yarn

npm install

🌽 Run

yarn go

npm run go

🍭 Build

yarn buildapp

npm run buildapp

🍌Structure:

Important:

🐓src/main：Main process (Electron).
🙀src/renderer：Renderer process (Vue).
🎰vue.config.js: Includes Path alias、electron-builder、i18n And app configurations.

Others:

🏨src/backend: Api backend, and axios configurations.
🌲src/locales：i18n Translation file directory.
🙀src/main/events：Main process (Electron) ipc and app events.

🌹 Special thanks:

_{Hancel Lin}

Welcome issues

vue-cli-electron-template's People

Contributors

Stargazers

Watchers

vue-cli-electron-template's Issues

引入本地文件如何引入呢?

引入本地音频文件,本地如何加载

The Events api `$on`, `$off` `$once` is

Vue3 取消了 on off等
请将 bus.js 的下列代码段修改

原：
     on (event, callback) {
        this.$on(event, callback)
      },
      off (event, callback) {
        this.$off(event, callback)
      }
改：
      on (event, callback) {
        this.$parent.$on(event, callback)
      },
      off (event, callback) {
        this.$parent.$off(event, callback)
      }

有没有自动构建 CI 和发布详细配置

我看了一下有 travis, 那 windows 平台的是手动发布么?
如何同时打包构建 32位和 64位, 并且添加在软件的后缀上? 如: test-x86-0.1.0.exe, test-x64-0.1.0.exe
如何自动将构建的软件包发布到 GitHub release.
如何实现: https://github.com/notable/notable/releases 里发布的那么多软件.
后期有计划支持 Vue3 和 Ts 么?

electron 打包为啥没有生成latest.yml文件

关于项目的一些建议

项目集成对于新手来说需要很长一段时间才能撸懂我作为新手中的新手对此研究很久因此我对您的项目进行了部分修改

下面是一些我个人看点和建议

1、i18n 国际化代码片段有些问题
1.1、命名方面locales一眼不太明白含义虽然有readme但是，lang比较贴合大部分新手老手一眼能知道这是语言部分
1.2、localeChanger下的index.vue中

原 7行处
{{ $t('localeChangerTitle') }} <span style="font-weight: bold;">{{ $i18n.locale }}</span>
改
{{ $t('langChangerTitle') }} <span style="font-weight: bold;">{{ $t(`langs.` + $i18n.locale) }}</span>
并在zh.json文件中 添加
如下
  "langs":{
    "zh-CN":"中文-简体",
    "zh-TW":"漢語-台灣",
    "zh-HK":"漢語-香港",
    "en":"English"
  }

如此修改可以直接在i18n组件中显示正确语言

2、I18n的组件位置，个人建议可以放在 App.vue 的div id=app-action下第一个位置有助于任意页面任意时间直接操作语言切换

3、微标logo建议在div id="app-bar"下放一个

4、关于eslint 的规范 standard，个人感觉不太友好如果可能请换prettier
对于 standard与prettier 区别在哪
请参考这篇文章https://blog.csdn.net/qq_21567385/article/details/109136668

5、关闭窗体建议可配置 close() 与 remote.app.exit() 不是每个程序都要用托盘付关闭程序

我仅仅是没事爱写点小工具所以上述您可以关注也可以无视！只是一些不专业的建议！

npm install fail

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR! dev eslint@"^7.20.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-eslint
npm ERR! dev @vue/cli-plugin-eslint@"~4.5.11" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See D:\Program Files\nodejs\node_cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! D:\Program Files\nodejs\node_cache_logs\2021-07-21T13_32_10_715Z-debug.log