零基礎(chǔ)學(xué) Electron

注：我是在其他編輯器寫的文章惦界，導(dǎo)出好像有的地方排版不正常了衬潦，后面在仔細(xì)排版蜡励，或者大家到這里去看：原文地址

前言

Electron 是一個(gè)使用 JavaScript境钟、 HTML 和 CSS 等 Web 技術(shù)創(chuàng)建跨平臺(tái)桌面應(yīng)用程序的框架，它負(fù)責(zé)比較難搞的部分俭识，你只需把精力放在你的核心業(yè)務(wù)開發(fā)上即可慨削。說到把精力放到核心業(yè)務(wù)開發(fā)上，這聽起來特別誘人套媚，但是很多初學(xué)者在第一個(gè) Hello World 上就被各種攔路虎擋住了缚态，我這篇文章的目標(biāo)就是幫助大家跳過去，把精力放在核心業(yè)務(wù)上堤瘤。

這是一篇 Electron 入門教程玫芦，讓大家能快速搭建開發(fā)環(huán)境、會(huì)寫 Hello World本辐、會(huì)用 Git 做開發(fā)版本管理桥帆、會(huì)用 SemVer 做發(fā)布版本管理、會(huì)打包成 exe 文件發(fā)布慎皱，目標(biāo)是讓大家能盡快把精力放到業(yè)務(wù)開發(fā)上去老虫。

適宜人群
Web 初學(xué)者
Electron 初學(xué)者
想用 Web 技術(shù)開發(fā)桌面應(yīng)用的開發(fā)者

看完本教程，您將收獲如下知識(shí)點(diǎn)：

  1. 搭建開發(fā)環(huán)境
  2. 使用國內(nèi)高速鏡像
  3. 手工創(chuàng)建 Demo 項(xiàng)目
  4. 安裝 Electron-forge 并自動(dòng)創(chuàng)建 Demo 項(xiàng)目
  5. 處理 loadFile...... is not function報(bào)錯(cuò)
  6. 編譯打包成 exe
  7. 用 Git 做開發(fā)版本管理
  8. 遵循 SemVer 做發(fā)布版本管理

tips:
本教程Electron 版本是 5.0.0茫多，Node.js 版本是 12.1.0祈匙，操作系統(tǒng)是 Windows10，沒有Mac OS 和 Linux相關(guān)的特定內(nèi)容。
Electron 支持 Windows 7 及以上版本夺欲，任何在低版本 Windows 上開發(fā) Electron 的嘗試都將是徒勞無功的跪帝。 如果你的 Windows 低于Windows 7，您可以使用微軟向開發(fā)者免費(fèi)提供的 Windows 10 虛擬機(jī)鏡像些阅，鏈接：https://developer.microsoft.com/zh-cn/windows/downloads/virtual-machines伞剑。

約定：
下文說在 VSCode 終端工具上執(zhí)行下面的命令，是指在 Visual Studio Code 橫排菜單的那個(gè)終端工具里執(zhí)行命令扑眉，當(dāng)然您完全可以在操作系統(tǒng)自帶的 CMD 命令行工具或 Windows PowerShell 上執(zhí)行命令纸泄，在一些場景它可能還更高效，如果您還不會(huì)靈活使用腰素，不用糾結(jié)聘裁，下面按提示操作即可。

由于本人能力有限弓千，疏漏或錯(cuò)誤在所難免衡便，還望讀者朋友若發(fā)現(xiàn)錯(cuò)誤或者其他問題，能給予諒解及批評(píng)指正洋访。

一镣陕、簡介

Electron 通俗點(diǎn)講就是用 HTML、CSS姻政、JavaScript 開發(fā)跨平臺(tái)桌面應(yīng)用程序的一個(gè)框架呆抑。
但是今天官網(wǎng)不建議去看了，我想您搜到這篇文章汁展，是直接來收干貨的鹊碍，不過傳送門還是根據(jù)慣例要上，官網(wǎng)：https://electronjs.org/ 食绿。

二侈咕、安裝

  1. 安裝 Visual Studio Code

下載并安裝：https://code.visualstudio.com
Windows 系統(tǒng)下載后直接下一步下一步，按默認(rèn)選項(xiàng)安裝即可器紧，這里不再講安裝耀销。
今天也不深入講解VSCode的使用，也不建議你去看铲汪，不過教程傳送門按慣例還是上一下：http://www.reibang.com/p/75652eb00680
不得不提熊尉，VSCode就是用 Electron 開發(fā)的。

  1. 安裝 Node.js

Electron 依賴 Node.js桥状，所以要先下載并安裝 Node.js帽揪，不過您得先確定要裝哪個(gè)版本的 Electron，然后下載對(duì)應(yīng)的 Node.js 版本辅斟，比如我這里是用Electron 5.0.1转晰，我下載的 Node.js 是12.0.0。

Windows 系統(tǒng)下載后直接下一步下一步，按默認(rèn)選項(xiàng)安裝即可查邢，這里不再講安裝蔗崎。npm 是包管理器，它會(huì)一起安裝扰藕，下面將用到它缓苛。
下載并安裝：http://nodejs.cn/download/
檢查安裝是否成功，在 VSCode 終端工具上執(zhí)行命令：

node -v
npm -v

成功輸出版本則安裝成功

  1. 安裝 Electron

在 VSCode 終端工具上用 npm 包管理器安裝 Electron (在國內(nèi)邓深，如果也怕一天一夜都沒裝起來的朋友未桥，請(qǐng)自動(dòng)忽略這一步，跳到設(shè)置淘寶鏡像)：

npm install electron --save-dev

tips：
--save-dev 參數(shù)在下面有講解
如果執(zhí)行上一步提示了 npm 版本過低芥备，在 VSCode 終端工具上用下面的命令升級(jí) npm：
npm install -g npm
報(bào)錯(cuò)的話冬耿，看下面的報(bào)錯(cuò)處理。
如果下面配置了淘寶鏡像萌壳，也遇到提示需要升級(jí)npm亦镶，執(zhí)行下面的命令：
cnpm install -g npm
如果執(zhí)行報(bào)錯(cuò)：Error: EPERM: operation not permitted……，請(qǐng)按Win + X 啟動(dòng) Windows PowerShell(管理員)(A)袱瓮，然后執(zhí)行命令缤骨。

棄用上面的命令，執(zhí)行下面的命令尺借，用淘寶鏡像提速：

npm install -g cnpm --registry=https://registry.npm.taobao.org

這樣以后就可以用 cnpm 代替 npm
在 VSCode 終端工具上執(zhí)行下面的命令安裝 Electron：

cnpm install electron --save-dev

tips：
cnpm 跟 npm 用法完全一致
淘寶鏡像官網(wǎng)：https://npm.taobao.org/
刪除 Electron：cnpm uninstall electron （在哪個(gè)目錄下绊起，卸載哪個(gè)目錄下的，如果報(bào)錯(cuò)燎斩，請(qǐng)按Win + X 啟動(dòng) Windows PowerShell(管理員)(A)勒庄，然后執(zhí)行命令。
升級(jí) Electron：cnpm update electron -g

tips：
如果想不同項(xiàng)目使用不同版本的 Electron瘫里，安裝時(shí)就不能用 -g 參數(shù)，如生產(chǎn)環(huán)境用 LTS 穩(wěn)定版本荡碾，新功能學(xué)習(xí)用 Current 版本谨读。
分別用到參數(shù)為 -g，--save坛吁，--save-dev劳殖，-D，關(guān)于這幾個(gè)參數(shù)下面的解釋還不夠拨脉，大家還需要百度哆姻，今天就不用了。
首選是 --save-dev 安裝到具體項(xiàng)目下
關(guān)于參數(shù)的更多介紹請(qǐng)看教程：http://www.cnblogs.com/limitcode/p/7906447.html
--save：是將模塊安裝到項(xiàng)目目錄下玫膀，并在 package.json 文件的 dependencies 節(jié)點(diǎn)寫入依賴
--save-dev 或 -D：意思是將模塊安裝到項(xiàng)目目錄下矛缨，并在 package.json 文件的 devDependencies節(jié)點(diǎn)寫入依賴
那 package.json 文件里面的 devDependencies 和 dependencies 對(duì)象有什么區(qū)別呢？devDependencies 里面的插件只用于開發(fā)環(huán)境，不用于生產(chǎn)環(huán)境箕昭，而 dependencies 是需要發(fā)布到生產(chǎn)環(huán)境的
為什么要保存在 package.json灵妨？因?yàn)楣?jié)點(diǎn)插件包相對(duì)來說非常龐大，不加入版本管理落竹，將配置信息寫入 package.json泌霍，方便將其加入版本管理，其他開發(fā)者對(duì)應(yīng)下載即可（命令提示符執(zhí)行 npm install述召，則會(huì)根據(jù) package.json 下載所有需要的包）朱转。

全局安裝：-g
全局安裝代碼：cnpm install -g electron
全局將會(huì)安裝在 C：\ Users \ Administrator \ AppData \ Roaming \ npm，并且寫入系統(tǒng)環(huán)境變量积暖；
全局安裝可以通過命令行任何地方調(diào)用它藤为；

非全局安裝：--save-dev
非全局代碼：cnpm install --save-dev electron
非全局安裝：將會(huì)安裝在當(dāng)前定位目錄（需要cd切換到具體項(xiàng)目目錄，或者在項(xiàng)目目錄按住 Shift呀酸，然后右鍵凉蜂，啟動(dòng) Powershell 執(zhí)行命令）；
非全局安裝將安裝在定位目錄的 node_modules 文件夾下性誉，通過要求（）調(diào)用窿吩；

tips：
這里順便提一個(gè)對(duì)初學(xué)者比較懵的命令：npm install
乍一看，怎么什么參數(shù)都沒有错览，它安裝什么呢纫雁？其實(shí)它是安裝當(dāng)前執(zhí)行命令所在目錄下的json文件里的相關(guān)依賴文件。我們從 GitHub 克隆一個(gè)別人的示例倾哺，示例里一般是不包含依賴的文件的轧邪，但是它的 package.json 里會(huì)有依賴列表，就是用這個(gè)命令下載一下那些依賴文件羞海。

  1. 安裝 Electron-forge

如果想手工搭建項(xiàng)目可以不安裝

Electron-forge 是 Electron 的一個(gè)腳手架忌愚，它可以自動(dòng)生成項(xiàng)目文件，這篇文章不會(huì)深入講它却邓，也可以選擇安裝硕糊，但是暫時(shí)不學(xué)它。
在 VSCode 終端工具上執(zhí)行命令腊徙，全局安裝它：

cnpm install -g electron-forge

三简十、手工創(chuàng)建項(xiàng)目

  1. 按下面的目錄結(jié)構(gòu)創(chuàng)建文件夾
D:\ElectronProject   
   └── ElectronDemo

手工在 D 盤創(chuàng)建文件夾，ElectronDemo 文件夾在 ElectronProject 文件夾里面（這次推薦手工快速建）撬腾，或者在 VSCode 終端工具上執(zhí)行下面的命令創(chuàng)建文件夾：

D: #本行寫法是為了兼容 cmd 命令行工具切換盤符的寫法
mkdir \ElectronProject\ElectronDemo
  1. 創(chuàng)建文件

用 Visual Studio Code 軟件來新建三個(gè)文件螟蝙，這里不多說，跟微軟其他軟件新建文件一樣民傻，創(chuàng)建完以后胰默，保存到 D:\ElectronProject\ElectronDemo场斑，目錄是這樣的。

習(xí)慣用其他 IDE初坠，請(qǐng)直接有用其他 IDE和簸，注意新建的文件編碼用 UTF-8

D:\ElectronProject\ElectronDemo    
                   ├── package.json    
                   ├── index.js    
                   └── index.html

三個(gè)文件之間的關(guān)系：index.html 是我們想要顯示的頁面，index.js 為此應(yīng)用的入口碟刺，package.json 為 npm 項(xiàng)目的配置文件锁保。

  1. 初始化 package.json

在 VSCode 終端工具上執(zhí)行下面的命令：

cd D: #本行寫法是為了兼容 cmd 命令行工具切換盤符
cd \ElectronProject\ElectronDemo
npm init

tips：
如果你覺得cd命令慢，你可以在 ElectronDemo 文件夾下按住 Shift 鍵半沽，然后點(diǎn)右鍵爽柒，啟動(dòng) Powershell，然后輸入 npm init 后回車

然后一路回車者填，可以全部用默認(rèn)浩村，也可以改內(nèi)容礼烈，創(chuàng)建完腮恩，我這里顯示如下署穗，其中版本我改了一下姑荷，您的可能是 "version":"1.0.0"，這一篇還不用糾結(jié)這些具體是什么意思棋嘲。

{
  "name": "ElectronDemo",
  "version": "0.1.0",
  "description": "test",
  "main": "index.js",
  "author": "qian",
  "license": "ISC",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}
  1. 在 index.js 里寫代碼
//引入 electron 模塊荠锭，它必須引入
//該模塊導(dǎo)出了一個(gè) app 對(duì)象和一個(gè) BrowserWindow 類堤魁，app 對(duì)象包含一些方法蜜暑，如 on 方法用于將事件綁定到事件函數(shù)中铐姚。
const {app,BrowserWindow} =require（'electron')
// 保持一個(gè)對(duì)于 window 對(duì)象的全局引用，如果你不這樣做肛捍，
// 當(dāng) JavaScript 對(duì)象被垃圾回收隐绵， window 會(huì)被自動(dòng)地關(guān)閉
let mainWindow
function createWindow(){
  //創(chuàng)建瀏覽器窗口
  mainWindow = new BrowserWindow({width:1024,height:768})
  //載入index.html
 mainWindow.loadURL(`file://${__dirname}/index.html`)
}
//ready是當(dāng)Electron完成初始化后觸發(fā)，這里初始化后就會(huì)去執(zhí)行 createWindow 函數(shù)拙毫，然后創(chuàng)建瀏覽器窗口并加載主頁面依许。
app.on('ready',createWindow)

tips：
關(guān)于加載 html 的代碼（上面第9行），在很多其他教程您可能看到的寫法是 mainWindow.loadFile('./index.html') 缀蹄，但是會(huì)報(bào) mainWindow.loadFile is not a function 錯(cuò)誤悍手，改寫成上面的 mainWindow.loadURL 寫法，它加載一個(gè) url袍患，可以是本地文件或者是遠(yuǎn)程 url，則不會(huì)報(bào)錯(cuò)竣付，注意不是單引號(hào)诡延，是鍵盤ESC鍵下面的那個(gè)，并且注意是要英文輸入法下輸入古胆。
另外關(guān)于分號(hào)（;）肆良，我這里是不加筛璧，分號(hào)要不要加，大家看到 js 代碼有的教程里有分號(hào)惹恃，有的沒有夭谤，比如我的，到底哪種最優(yōu)巫糙。關(guān)于加不加朗儒，可以參考 Vue貢獻(xiàn)者尤雨溪的回答 ：https://www.zhihu.com/question/20298345/answer/49551142

  1. 在 index.html 里寫代碼
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Electron 項(xiàng)目</title>
    </head>
    <body>
        <h1>這是我們的第一個(gè) ELECTRON 練習(xí)項(xiàng)目</h1>
    </body>
</html>
  1. 運(yùn)行項(xiàng)目

在 VSCode 終端工具上執(zhí)行下面的命令：

cd D:\ElectronProject\ElectronDemo

tips：
不切換到項(xiàng)目目錄，無法啟動(dòng)項(xiàng)目
如果你覺得cd命令慢参淹，你可以在 ElectronDemo 文件夾下按住 Shift 鍵醉锄，然后點(diǎn)右鍵，啟動(dòng) Powershell浙值，然后執(zhí)行 electron . 命令

繼續(xù)執(zhí)行命令：

electron .

不出意外恳不，將正常啟動(dòng)項(xiàng)目

四、使用electron-forge自動(dòng)創(chuàng)建項(xiàng)目

在 VSCode 終端工具上執(zhí)行下面的命令：

D: #本行寫法為兼容 cmd 命令行工具切換盤符的寫法
cd \ElectronProject
electron-forge init Electron-forgeDemo

tips：
如果你覺得cd命令慢开呐，你可以在 ElectronProject 文件夾下按住 Shift 鍵烟勋，然后點(diǎn)右鍵，啟動(dòng) Powershell筐付，然后輸入 electron-forge init Electron-forgeDemo 后回車
創(chuàng)建過程殺毒軟件可能會(huì)對(duì)操作dll進(jìn)行阻止卵惦，點(diǎn)允許。

創(chuàng)建成功后家妆，它會(huì)自動(dòng)生成一個(gè)文件夾鸵荠，文件目錄應(yīng)該是這樣：

D:\ElectronProject   
   ├── ElectronDemo
   ├── Electron-forgeDemo

繼續(xù)執(zhí)行下面的命令啟動(dòng)項(xiàng)目

cd \ElectronProject\Eelectron-forgeDemo
electron-forge start

tips：
不切換到項(xiàng)目目錄，無法啟動(dòng)項(xiàng)目
如果你覺得cd命令慢伤极，你可以在 Eelectron-forgeDemo 文件夾下按住 Shift 鍵蛹找，然后點(diǎn)右鍵，啟動(dòng) Powershell哨坪，然后輸入 electron-forge start 后回車

五庸疾、打包

  1. 安裝 Electron-prebuilt

它是一個(gè) Electron 的預(yù)編譯版本

cnpm install -g electron-prebuilt
  1. 安裝 Electron-packager

它是一個(gè)用于打包 Electron 應(yīng)用的工具

cnpm install -g electron-packager
  1. 打包

3.1 在 VSCode 終端工具上執(zhí)行下面的打包命令：

electron-packager . ElectronDemo --win --out ../myElectronDemo --arch=x64 --electron-version=5.0.0 --overwrite --ignore=node_module

tips：
格式這樣
electron-packager <應(yīng)用目錄> <應(yīng)用名稱> <打包平臺(tái)> --out <輸出目錄> <架構(gòu)> <應(yīng)用版本>
對(duì)應(yīng)關(guān)系
electron-packager . ElectronDemo --win --out ../myElectronDemo --arch=x64 --electron-version=5.0.0 --overwrite --ignore=node_module
. 點(diǎn)代表當(dāng)前目錄
ElectronDemo 代表應(yīng)用名稱
win 代表打包平臺(tái) Windows
../myElectronDemo 在項(xiàng)目上級(jí)文件夾新建文件夾
electron-version=5.0.0 代表 Electron 的版本號(hào)，我這里是5.0.0
--overwrite 是覆蓋原文件
--ignore=node_module 是忽略node_module

打包過程当编，殺毒軟件可能會(huì)報(bào)操作關(guān)鍵 dll ……届慈，點(diǎn)允許。
打包完成忿偷，到上級(jí)目錄找到打包好的文件夾金顿，進(jìn)去執(zhí)行 exe 即可啟動(dòng)應(yīng)用。

3.2 也可以將打包命令寫到 package.json 文件里

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "package":"electron-packager . ElectronDemo --win --out ../myElectronDemo --arch=x64 --electron-version=5.0.0 --overwrite --ignore=node_module"
  }

然后在 VSCode 終端工具上執(zhí)行下面的打包命令：

cnpm run-script package

上面兩步的任何一步鲤桥，執(zhí)行完畢后揍拆，看到父級(jí)目錄下已經(jīng)產(chǎn)生了我們希望看到的應(yīng)用文件夾，雙擊里面的應(yīng)用程序 electron01.exe 就可以直接打開桌面應(yīng)用了茶凳，不過還不是安裝包嫂拴。

  1. 圖標(biāo)

如果我們想要更改窗口左上角的圖標(biāo)和任務(wù)欄的圖標(biāo)播揪，只需要在打包的命令上加個(gè) icon參數(shù)就好了。

electron-packager . ElectronDemo --win --out ../myElectronDemo --arch=x64 --electron-version=5.0.0 --overwrite --ignore=node_module --icon=./app/img/icon.ico
  1. 生成安裝包

5.1 使用火鳳

火鳳官網(wǎng)：www.hofosoft.cn筒狠，這個(gè)比較簡單猪狈，但是可控項(xiàng)目少，今天推薦用它辩恼。

5.2 使用 NSIS

NSIS 教程：https://www.cnblogs.com/modou/p/3573772.html雇庙，這個(gè)稍微復(fù)雜了一些，但是可控項(xiàng)目特別多运挫，今天不建議大家去看它状共，這里只給傳送門。

五谁帕、開發(fā)版本控制

我們用 Git 進(jìn)行版本控制

tips：
它是 Linux 創(chuàng)始人 Linus Benedict Torvalds 的第二神作峡继，特別好用。
想深學(xué)更多 Git匈挖，請(qǐng)看廖雪峰老師的 Git 教程：https://www.liaoxuefeng.com/wiki/896043488029600碾牌，不過今天不建議你點(diǎn)進(jìn)去，后面再說儡循，今天還不用去學(xué)那么深舶吗，不過它是必學(xué)。

  1. 下載并安裝 Git 客戶端

官網(wǎng)地址：https://www.git-scm.com/download/

  1. 設(shè)置用戶和郵箱

安裝后择膝，在 Windows 開始菜單或桌面空白處右鍵誓琼，找到并啟動(dòng) Git Bash 或 Git Bash Here，設(shè)置用戶和郵箱肴捉，執(zhí)行下面的命令腹侣。

git config --global user.name "Your Name"
git config --global user.email "email@example.com"

git config 命令中的 --global 參數(shù)，這個(gè)參數(shù)表示這臺(tái)機(jī)器上所有的 Git 倉庫都會(huì)使用這個(gè)配置齿穗，當(dāng)然也可以對(duì)某個(gè)倉庫指定不同的用戶名和 Email 地址傲隶。

tips：
至于為什么要要設(shè)置名字和郵箱，是因?yàn)?Git 是分布式版本控制系統(tǒng)窃页，每個(gè)機(jī)器都都要自報(bào)家門跺株，說出名字和 Email 地址。
那么問題來了脖卖，這個(gè)用戶名與郵箱可以隨便填嗎乒省？答案是可以，那有什么作用呢畦木？當(dāng)郵箱號(hào)與 GitHub 上的倉庫的郵箱號(hào)一致袖扛，提交記錄左側(cè)會(huì)顯示賬號(hào)頭像，并且可點(diǎn)擊馋劈，并且名字是用的 GitHub 的 username 而不是上面設(shè)置的 Your Name攻锰，反之不可點(diǎn)擊，名字用的是上面配置的 Your Name妓雾。
更深入的內(nèi)容娶吞，請(qǐng)看 Git 教程。

  1. 生成本地倉庫

在項(xiàng)目目錄下右鍵械姻，啟動(dòng) Git Bash Here妒蛇，并執(zhí)行命令。

git init

這時(shí)將生成一個(gè) git 文件夾楷拳，這個(gè)目錄是 Git 用來跟蹤管理版本庫的绣夺，里面的東西不要手動(dòng)去修改。

tips：
解釋一個(gè)謎團(tuán)欢揖，所有的版本控制系統(tǒng)陶耍，其實(shí)只能跟蹤文本文件的改動(dòng)，另外文本是有編碼的她混，如果沒有歷史遺留問題烈钞，建議統(tǒng)一用 UTF-8（VSCode新建的文件默認(rèn)了UTF-8，在右下角可以看到）坤按，另外不要用 Windows 的記事本毯欣，就算設(shè)置為 UTF-8 也不要用，具體原因可百度臭脓。而圖片酗钞、視頻這些二進(jìn)制文件，雖然也能由版本控制系統(tǒng)管理来累，但沒法跟蹤文件文本的變化砚作，只能把二進(jìn)制文件每次改動(dòng)串起來，也就是只知道圖片從 10KB 改成了 30KB佃扼，但到底改了啥偎巢，版本控制系統(tǒng)不知道。

  1. 提交文件到本地倉庫

初始化好 git 倉庫兼耀，我們將文件夾下的文件添加到 git 倉庫压昼。
第一步：在項(xiàng)目文件夾下右鍵，啟動(dòng) Git Bash Here（如果上一步你關(guān)了的話才要重新啟動(dòng)）瘤运，用 git add 命令告訴 Git窍霞，把文件添加到倉庫，如果是所有文件拯坟，用點(diǎn)（.）表示但金，下面有兩種代碼，選一種郁季。

git add 文件名.后綴
git add .

執(zhí)行后沒有什么提示冷溃，那就正確了钱磅，沒有提示就是最好的提示。
第二步：用 git commit 命令告訴 Git似枕，把文件提交到倉庫盖淡，提交一次一個(gè)版本，后續(xù)可以回滾凿歼。

git commit -m "提交備注"

tips：
如果你對(duì)提交為什么要先 add 后 commit 的兩步設(shè)計(jì)有疑問褪迟，請(qǐng)看上面的 Git 教程。備注也是重中之中答憔，千萬不要寫一些沒有意義的字符味赃，不然后面可能會(huì)哭，正確的做法是簡要描述你本本次提交里面改了或者新增了什么虐拓。

  1. 遠(yuǎn)程倉庫

tips：
今天允許您跳過本節(jié)心俗，不過它很重要，后面一定要學(xué)侯嘀。

這里推薦選擇的遠(yuǎn)程倉庫平臺(tái)有：

  • 碼云：https://gitee.com/另凌，私有倉庫也是免費(fèi)的，生態(tài)差一點(diǎn)戒幔。
  • GitHub：https://github.com吠谢，私有倉庫的收費(fèi)的，生態(tài)比較好一點(diǎn)诗茎。

下面我們講 GitHub工坊。
先用郵箱注冊(cè)一個(gè)賬號(hào)，設(shè)置 username敢订，這里取好聽一點(diǎn)王污，不過后面可改，這個(gè)是公開的楚午，比如 PG 大神德哥的 GitHub 地址是：https://github.com/digoal 昭齐，最后的 digoal 就是 username。

5.1 創(chuàng)建 SSH Key

本地 Git 倉庫和 GitHub 倉庫之間的傳輸矾柜，有兩種：

  • SSH
  • https

https 這里不推薦阱驾，用它速度會(huì)慢一點(diǎn)，另外每次連接要輸入密碼怪蔑，有點(diǎn)麻煩里覆，今天講解 SSH 加密的，由于遠(yuǎn)程推送需要驗(yàn)證身份缆瓣，所以需要設(shè)置喧枷。
接下來講操作流程，進(jìn)入到項(xiàng)目文件夾，空白處點(diǎn)鼠標(biāo)右鍵隧甚，打開 Git Bash Here
檢查公鑰是否存在车荔，輸入命令：

cd ~/.ssh #打開公鑰目錄
ls #查看是否存在公鑰id_rsa.pub

我的執(zhí)行結(jié)果如下，代表有了戚扳，不用創(chuàng)建了：

id_rsa  id_rsa.pub  known_hosts

檢查郵箱夸赫，輸入命令：

git config --global  --list #檢查郵箱是什么

我的執(zhí)行結(jié)果如下：

filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge -- %f
filter.lfs.process=git-lfs filter-process
filter.lfs.required=true
user.email=5627XXX767@qq.com
user.name=ccc
winupdater.recentlyseenversion=2.21.0.windows.1

如果沒有 id_rsa.pub ，就執(zhí)行下面的命令新建 SSH Key：

ssh-keygen -t rsa -C "youremail@example.com"

tips：
"youremail@example.com"改為"327XXX727@qq.com"
郵件地址換成你自己的郵件地址咖城，然后一路回車，使用默認(rèn)值即可呼奢，一切順利的話宜雀，可以在用戶主目錄里找到.ssh目錄（我的在：C:\Users\qian.ssh），里面有id_rsa和id_rsa.pub兩個(gè)文件握础，這兩個(gè)就是SSH Key的秘鑰對(duì)辐董，id_rsa是私鑰，不能泄露出去禀综，id_rsa.pub是公鑰简烘，可以放心地告訴任何人，這里就填到 GitHub 上定枷。
文件夾里應(yīng)該如下的樣子：
~/.ssh
├── id_rsa
├── id_rsa.pub
└── known_hosts

創(chuàng)建過程孤澎，命令行會(huì)顯示新生成的公鑰保存在哪個(gè)目錄（我的在：C:\Users\qian.ssh），到那個(gè)目錄找到 id_rsa.pub 欠窒，然后按下面的流程操作：

  1. 打開 GitHub 官網(wǎng)
  2. 右上角頭像有個(gè)倒三角小圖覆旭，到里面，點(diǎn)開 “Settings”
  3. 左側(cè)豎排導(dǎo)航岖妄，點(diǎn)開 “SSH and GPG keys”
  4. 點(diǎn)擊“New SSH key” 按鈕
  5. Title 標(biāo)題隨便寫型将，不過因?yàn)檫@個(gè)是每臺(tái)電腦不一樣，標(biāo)題最好寫明是您哪臺(tái)電腦的
  6. Key 應(yīng)該填寫的是在本地電腦執(zhí)行命令生成的 id_rsa.pub 文件里的內(nèi)容（用記事本打開荐虐，全選七兜，復(fù)制，粘貼到Key這里）
  7. 點(diǎn) “Add SSH key”按鈕福扬，提交腕铸，操作完成

5.2 創(chuàng)建一個(gè)新的倉庫

在 Git Hub 右上角找到 “Create a new repo” 按鈕，填寫倉庫名 ElectronDemo 忧换，然后點(diǎn)擊 “Create repository” 按鈕創(chuàng)建一個(gè)倉庫恬惯。

tips：
當(dāng)本地有個(gè)文件夾里的倉庫要上傳到遠(yuǎn)程倉庫（本地可以有多個(gè)文件夾里的項(xiàng)目，同步到通一個(gè) GitHub 上亚茬，只需先在 GitHub 上創(chuàng)建一個(gè)倉庫酪耳。
這里不用勾選生成 README，如果勾選了，后面第一次本地與遠(yuǎn)程同步碗暗，需要先 git pull 拉遠(yuǎn)程的到本地颈将，然后 git push 推上去，我們今天只是入門言疗，所以不建議大家搞復(fù)雜了晴圾，后面直接往上推即可。

5.3 本地倉庫與遠(yuǎn)程倉庫關(guān)聯(lián)

在本地項(xiàng)目文件夾里空白處右鍵噪奄，打開 Git Bash Here死姚，然后輸入如下命令

git remote add origin git@github.com:lixiang/ElectronDemo.git

tips：
上面的命令是與遠(yuǎn)程倉庫建立聯(lián)系，下面的命令是當(dāng)前文件夾下的倉庫與 GitHub上的ElectronDemo 建立聯(lián)系勤篮，把這個(gè)寫到了當(dāng)前文件夾下的 git 目錄里的 config 文件夾里都毒，這樣下面就可以在當(dāng)前目錄打開 Git Bash Here 然后執(zhí)行 git push origin master 它就會(huì)把當(dāng)前文件下的倉庫，對(duì)應(yīng)傳到 GitHub 上的倉庫里碰缔。
git remote add origin git@github.com:lixiang（GitHub 上的username）/ElectronDemo（倉庫名）.git
把上面的 lixiang 替換成你自己的 GitHub 賬戶名账劲，否則您無法把您本地的項(xiàng)目推送到 Git Hub 倉庫的，因?yàn)槟惚镜貨]有我的 id_rsa.pub 公鑰金抡。ElectronDemo 替換成 Github 官網(wǎng)上的倉庫名稱（repository)瀑焦，注意 Github 上的倉庫名稱，不支持中文梗肝，并且必須手工去 GitHub 上先建立倉庫榛瓮。
執(zhí)行命令如果提示：fatal: remote origin already exists. 它的意思是遠(yuǎn)程 origin 已經(jīng)存在。那么執(zhí)行：git remote rm origin 然后再重新執(zhí)行 git remote add origin ......
還有可能會(huì)報(bào)的錯(cuò)誤是巫击，提示沒有姓名榆芦，郵箱，那就是前面沒有設(shè)置喘鸟，請(qǐng)?jiān)O(shè)置匆绣。

5.4 本地庫的 master 分支推送到遠(yuǎn)程庫

在本地項(xiàng)目文件夾里空白處右鍵，打開 Git Bash Here什黑，然后輸入如下命令

git push -u origin master

tips：
由于遠(yuǎn)程庫是空的崎淳，我們第一次推送master分支時(shí)，加上了-u參數(shù)愕把，Git不但會(huì)把本地的master分支內(nèi)容推送的遠(yuǎn)程新的master分支拣凹，還會(huì)把本地的master分支和遠(yuǎn)程的master分支關(guān)聯(lián)起來，在以后的推送或者拉取時(shí)就可以簡化命令恨豁。

至此嚣镜，本地倉庫的內(nèi)容就與遠(yuǎn)程倉庫的內(nèi)容一致了。
關(guān)于遠(yuǎn)程倉庫我們本教程就到這里橘蜜，其他內(nèi)容建議學(xué)習(xí)上面的 Git 教程菊匿，真心寫的好付呕。

5.5 后續(xù)推送

git push origin master

當(dāng)本地有用 git commit 命令，向本地版本庫提交了新的版本跌捆，則可以能需要git push 把本地更新推送到遠(yuǎn)程徽职，具體語句有下面的這些寫法，主要是看參數(shù)寫與不寫的意思佩厚。

git push <遠(yuǎn)程主機(jī)名> <本地分支名>  <遠(yuǎn)程分支名>
git push origin master：refs/for/master

上面語句即是將本地的master分支推送到遠(yuǎn)程主機(jī)origin上的對(duì)應(yīng)master分支

  • git push #不帶任何參數(shù)的git push姆钉，默認(rèn)只推送當(dāng)前分支，這叫做simple方式
  • git push origin #如果當(dāng)前分支與遠(yuǎn)程分支存在追蹤關(guān)系抄瓦，則本地分支和遠(yuǎn)程分支都可以省略潮瓶，將當(dāng)前分支推送到origin主機(jī)的對(duì)應(yīng)分支
  • git push origin master #遠(yuǎn)程分支被省略，則表示將本地master分支推送到與之存在追蹤關(guān)系的遠(yuǎn)程分支（通常兩者同名）钙姊，如果該遠(yuǎn)程分支不存在筋讨，則會(huì)被新建
  • git push -u origin master #將本地的master分支推送到origin主機(jī)，同時(shí)指定origin為默認(rèn)主機(jī)摸恍，后面就可以不加任何參數(shù)使用git push了

至于分支創(chuàng)建合并、版本回退赤屋，沖突處理等立镶，本篇文章不再講解，也不希望你現(xiàn)在就去看类早，目前每次會(huì)把更新推送到 master 主分支就可以了媚媒，后面你可以看上面的 Git 教程。

六涩僻、生產(chǎn)版本管理

生產(chǎn)版本管理缭召，要根據(jù)下面這樣的語義規(guī)則來，比如2.0.0跟1.5.3之間逆日，應(yīng)該是有 API 突破性變更嵌巷，或者 Node.js 重大版本跟新，或者 Chromium 版本更新了室抽，才能改最前面的一位搪哪，不是隨意編出來的，我們發(fā)布版本時(shí)版本編號(hào)應(yīng)該如下這樣來確定每位的增加坪圾。

這里不再贅述晓折，直接上別人的教程，今天可以不用深讀兽泄。
生產(chǎn)版本建議參考：https://semver.org/lang/zh-CN/
Electron 遵循：https://electronjs.org/docs/tutorial/electron-versioning#semver

這里是這篇教程的結(jié)尾漓概，另一篇教程的預(yù)告。

下一篇教程我們將精力放在業(yè)務(wù)上面病梢，我們?cè)囍鰝€(gè)小項(xiàng)目胃珍，這樣對(duì)大家的學(xué)習(xí)更有幫助，我們要盡快從 Hello World 往后面走，懷舊不適合學(xué)習(xí)編程堂鲜，對(duì)吧栈雳。
強(qiáng)烈建議加QQ群：1025951999，方便交流缔莲，也方便有文章時(shí)能及時(shí)通知大家哥纫。大家也請(qǐng)?jiān)?GitChat 上關(guān)注我，以便更容易找到我痴奏。

項(xiàng)目

設(shè)計(jì)一個(gè)文本編輯器

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末蛀骇，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子读拆，更是在濱河造成了極大的恐慌擅憔，老刑警劉巖，帶你破解...
    沈念sama閱讀 212,718評(píng)論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件檐晕，死亡現(xiàn)場離奇詭異暑诸，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)辟灰，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評(píng)論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門个榕，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人芥喇，你說我怎么就攤上這事西采。” “怎么了继控？”我有些...
    開封第一講書人閱讀 158,207評(píng)論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵械馆，是天一觀的道長。 經(jīng)常有香客問我武通，道長霹崎，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,755評(píng)論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任冶忱，我火速辦了婚禮仿畸，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘朗和。我一直安慰自己错沽，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評(píng)論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布眶拉。 她就那樣靜靜地躺著千埃，像睡著了一般。 火紅的嫁衣襯著肌膚如雪忆植。 梳的紋絲不亂的頭發(fā)上放可，一...
    開封第一講書人閱讀 50,050評(píng)論 1贊 291
  • 城市分裂傳說
    那天谒臼，我揣著相機(jī)與錄音，去河邊找鬼耀里。 笑死蜈缤，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的冯挎。 我是一名探鬼主播底哥，決...
    沈念sama閱讀 39,136評(píng)論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢(mèng)啊……” “哼房官！你這毒婦竟也來了趾徽？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 37,882評(píng)論 0贊 268
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤翰守，失蹤者是張志新（化名）和其女友劉穎孵奶，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蜡峰，經(jīng)...
    沈念sama閱讀 44,330評(píng)論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡了袁，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評(píng)論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了湿颅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片载绿。...
    茶點(diǎn)故事閱讀 38,789評(píng)論 1贊 341
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖肖爵，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情臀脏，我是刑警寧澤劝堪，帶...
    沈念sama閱讀 34,477評(píng)論 4贊 333
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站揉稚，受9級(jí)特大地震影響秒啦，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜搀玖，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評(píng)論 3贊 317
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一余境、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧灌诅，春花似錦芳来、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評(píng)論 0贊 21
  • 一樁弒父案即舌，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至挎袜，卻和暖如春顽聂，著一層夾襖步出監(jiān)牢的瞬間肥惭，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評(píng)論 1贊 267
  • 情欲美人皮
    我被黑心中介騙來泰國打工紊搪， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蜜葱，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,598評(píng)論 2贊 362
  • 代替公主和親
    正文 我出身青樓耀石，卻偏偏與公主長得像牵囤，于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子娶牌，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評(píng)論 2贊 351