Home

Welcome to the vue-cli-electron-template wiki!

🚀详细讲解

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('要翻译的内容')