Electron(1.6.11) + koa2 仿騰訊TGP遊戲登陸器（一）：環境部署

醞釀了很久想寫個新版的Electron教程，奈何有點（很是）懶，而且常常被LOL吸引。。。終於下決心開搞了，要否則越堆越多的工做人生就GG了。預計的話大概須要一到兩個月來完成吧，畢竟是非工做時間來寫，還有LOL那個小婊砸須要我關懷。

還有，儘可能不要吐槽個人代碼，尤爲是 css & html ,不過歡迎告知更好的寫法。

項目地址：https://coding.net/u/YupegLV/...

代碼我會不按期的push，可是若是沒有大的新功能實現的話，就不更新教程了。

1、環境配置

一、新版的和舊版的環境配置基本同樣，我用的electron-version:1.6.11，node-version:8.1.4。（截止2017-7-28）

二、關於牆的問題，最近因爲xx緣由，牆有點厚。推薦使用淘寶的npm鏡像吧，不過 electron 的項須要特殊配置一下，參見這裏。

三、推薦一個vscode插件 ：VersionLens，能夠提示package.json 裏的依賴項的最新版本

四、electron官方中文API：github

2、搞個基礎的框架

一、基本的代碼姿式差很少就這樣

main.js 是程序主入口，index.html 爲主頁面。

3、一些我以爲須要寫的東西

個人前端技術很渣，html只會div，因此也不着重說這塊了。只說點感受須要特別提示的東西吧。

1.jQuery的引用：

<script>
    window.$ = window.jQuery = require('./js/tools/jquery.js');
</script>

2.使區域可拖拽 css

.drag {
    -webkit-app-region: drag;
}

由於electron使用的是chrome的框架，因此css裏只用-webkit就OK了。

3.關於子頁面（區域5）的實現有兩種實現方式。

①從服務器獲取HTML文本直接添加到index.html裏;
②本地寫好html框架，從服務器獲取json數據，動態加載數據。

兩種的各有利弊，第一種辦法就是傳輸數據量大，而且一些點擊事件實現有些問題，還有就是服務器端的頁面代碼很差調試。第二種辦法就是，頁面框架被固定住了，想要更改的話只能更新軟件。

再有再加，下節說服務器的搭建。