-
Notifications
You must be signed in to change notification settings - Fork 22
Home
Pure-Peace edited this page Mar 16, 2020
·
1 revision
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('要翻译的内容')