用vue-cli3和electron快速构建桌面程序：vue-cli-electron-template，支持i18n多语言，一个模板

🔥vue-cli-electron-template

⭐使用vue-cli 3和Electron 8构建的一个模块化的桌面应用程序模板。可以方便进行的打包、切换程序语言，使用自定义无边框窗口，并且添加了vue-router、vue-i18n、axios等等常用插件，还提供了一些演示功能。

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

• 🌺English / 💖中文

⚡-介绍！-

🚀构建于vue-cli & electron-builder，模块化设计。添加了常用插件及演示功能。你可以在本项目中愉快的使用svg图片，舒适的享受i18n多国语言支持， 切换程序语言（整个程序！包括electron原生菜单及浏览器页面)，快速进行多窗口管理、菜单管理，并且具有一个方便快捷的网络请求方式。

📘这些:

• 🍊基础: vue-cli &electron-builder
• 🌕路由: vue-router
• 🍁多语言: vue-i18n
• 🌝网络请求器: axios
• 🚅快速打包: electron-builder
• 💚css预处理器: less

🔍以及:

• ⛅自定义的原生无边框窗口
• 🎨使用面向对象的模块化写法（主进程文件）
• 🍰整个程序都可以进行方便的语言切换
• 🐳一个方便你使用svg图片的组件（基于svg-sprite-loader插件）
• 🏀Electron6：添加了一些api演示
• 🍉vue-i18n：添加了语言切换演示，包括electron原生菜单
• 🍩axios：添加了网络请求演示
• 🌼使用ESlint进行代码风格规范
• 🌠还有vuex、vue-router
• 🍖我没有在项目中添加第三方ui库，您可以随心所欲选择自己喜欢的添加

📷Screenshots:

🏆-开始吧！-

1. 🍬克隆这个仓库

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

2. 🍮进入目录

cd vue-cli-electron-template

3. 🍙安装依赖（推荐使用yarn）

yarn 或 npm install

4. 🌽启动应用

yarn go 或 npm run go

5. 🍭打包应用

yarn packapp 或 npm run packapp

🍌-结构！-

⚽文件的：

• 🎰./vue.config.js: 包括 vue路径别名、electron-builder、i18n 等其它配配置项
• ☔src/background.js: 主进程入口文件
• 🐐src/mainProcess/appManager.js: 负责管理主进程
• 🚧src/main.js: Vue入口文件
• 🏨src/backend.js: 网络请求接口及axios配置项

🍀目录的：

• 🌲src/locales：i18n多语言翻译文件目录
• 🐓src/mainProcess：主进程模块化文件
• 🙀src/mainProcess/events：ipc及app事件
• 🌴src/mainProcess/menus：菜单管理
• 🐏src/mainProcess/plugins：目前只有翻译器在里面
• 🙉src/mainProcess/windows：多窗口及窗口管理器

---

🔞后记：

🌹初学electron，欢迎提建议……

🚀详细讲解

1、在vue页面中可以随意使用svg图标：

• 只需要将svg图片放入src/assets/svg目录中，接着在vue页面使用svg-icon标签即可：

<template>
  <div>
    <svg-icon icon-class="svg图片名称（不含后缀）" />
  </div>
</template>

2、接口使用及管理：

• 在 src/backend.js 添加你的接口

// 添加你的接口
export default {
  demoGet () {
    return $axios.get('http://example.com/')
      .then(response => response.data)
  },
  demoPost () {
    return $axios.post('http://example.com/')
      .then(response => response.data)
  }
}

• 在任意页面通过调用全局函数 $backend 来使用你的接口：

<template>
 <div>
   <div
     class="home-button app-action-button"
     style="margin: 0 auto;"
     @click="sendRequest"
   >
     {{ buttonText }}
   </div>
 </div>
</template>

<script>

export default {
 data () {
   return {
     buttonText: '发送请求'
   }
 },
 methods: {
   sendRequest () {
     this.buttonText = '正在请求'
     this.$backend.demoGet(
       // 参数 / parameter
     ).then(res => {
       console.log(res)
       this.buttonText = '请求成功'
     }).catch(error => {
       console.log(error)
       this.buttonText = '请求失败'
     })
   }
 }
}
</script>

3、使你的应用国际化

对于浏览器页面（渲染进程）：

• 已集成vue-i18n插件，只需在src/locales中添加语言翻译文件，如zh.json：

{
  "welcome": "欢迎！",
  "demo": {
    "hello": "打招呼",
    "sing": "唱歌",
    "more": {
      "message": "你看到我了！",
      "laugh": "死亡如风，常伴吾身",
    }
  }
}

• 接着在任意vue页面中调用全局函数$t对需要国际化的文字进行处理即可：

<template>
  <div>
    <h1>当前语言：{{ $i18n.locale }}</h1>
    <h1>可用语言： {{ $i18n.availableLocales }}</h1>
    <div 
      class="home-button app-action-button"
      @click="()=>{ $i18n.locale='语言翻译文件名称（不含后缀）' }">
      切换语言
    </div>
	<h2>{{ $t("welcome") }}</h2>
	<h2>{{ $t("demo.hello") }}</h2>
	<h2>{{ $t("demo.more.message") }}</h2>
  </div>
</template>

<script>

export default {
  data () {
    return {
      hi: this.$t('demo.sing')
    }
  }
}
</script>

组件：

• 我封装了一个localeChanger组件，通过它可以直接切换整个应用的语言，包含electron原生组件（主进程语言）
• 在vue页面中像这样调用：

<template>
  <div>
    <h1>当前语言：{{ $i18n.locale }}</h1>
    <h2>{{ $t('welcome') }}</h2>
    <locale-changer/>
  </div>
</template>

<script>
import localeChanger from 'components/localeChanger'

export default {
  components: {
    localeChanger
  }
}
</script>

来看看我们是怎样通过它切换主进程语言的

• 打开src/components/localeChanger/index.vue，找到函数changeLang：

changeLang (lang) {
  this.$i18n.locale = lang
  ipc.send('appLanguageChange', lang) // 通过ipc发送事件消息给主进程
  this.showOptions = false 

发现使用了ipc通信，在主进程对应的地方找到该事件：

• 打开主进程ipc事件管理器：src/mainProcess/events/ipc/index.js：

// 语言变更事件 / language change event
ipcMain.on('appLanguageChange', (sys, lang) => {
 this.appManager.languageChange(lang)
})

可以看到，主进程在收到该事件消息后直接调用appManager对应的函数进行语言变更

• appManager主要负责管理整个主进程，我们打开src/mainProcess/appManager.js：

import Translator from './plugins/translator'

class AppManager {
  constructor () {
    // 翻译器
    this.translator = new Translator()
  }
  languageChange (lang) {
    this.translator.changeLang(lang)
    // 重新设置托盘菜单（为了变更语言）
    // Reset the language of the tray menu
    this.setAppTrayMenu()
  }
}

appManager中的languageChange函数最后切换了translator对象的语言，并重设了electron原生托盘菜单

• 所以实际上主进程中的语言完全由translator对象控制，我们只需要改变它就能轻松的切换整个应用的语言了！

在主进程中使用翻译器的例子可以在src/mainProcess/menus/index.js中找到，大体上就是：

• 先通过translator对象的get函数获得翻译函数$t，接下来的用法与vue中一样，调用$t就可以了。

const $t = this.translator.get()
const 要翻译的内容 = $t('要翻译的内容')

项目地址：
Github:https://github.com/Pure-Peace/vue-cli-electron-template