用vue-cli3和electron快速构建桌面程序:vue-cli-electron-template,支持i18n多语言,一个模板
vue-cli-electron-template使用vue-cli3和Electron6构建的桌面应用模板,使用自定义的无原生边框窗口,并包含了vue-router、vue-i18n、axios等常用部件,以及一些演示功能。-介绍-基于vue-cli & electron-builder,添加了常用插件及演示功能。您可以愉快的在本项目中使用svg图标,舒适的使用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:
🏆-开始吧!-
- 🍬克隆这个仓库
git clone https://github.com/Pure-Peace/vue-cli-electron-template
- 🍮进入目录
cd vue-cli-electron-template
- 🍙安装依赖(推荐使用yarn)
yarn 或 npm install
- 🌽启动应用
yarn go 或 npm run go
- 🍭打包应用
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
更多推荐
所有评论(0)