🔥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