Angular+Electron+VSCode的桌面應用
轉自：http://blog.csdn.net/yr7942793/article/details/50986696
第一部分 Electron開發入門筆記
GitHub 的 Electron 框架（以前叫做 Atom Shell）允許你使用 HTML, CSS 和 JavaScript 編寫跨平台的桌面應用。它是 io.js 運行時的衍生，專注於桌面應用而不是 web 服務端。Electron 豐富的原生 API 使我們能夠在頁面中直接使用 JavaScript 獲取原生的內容。
本文學習的主要知識來自 【譯】使用 AngularJS 和 Electron 構建桌面應用 https://segmentfault.com/a/1190000004202948
一、基礎環境的搭建
為了安裝相應的開發環境和運行庫，首先需要安裝以下兩個東西：
1、安裝Nodejs和npm包管理器
2、安裝Bower（Web開發包管理器）
3、代碼編輯器（Visual Studio Code）
本文學習測試的環境為Windows 10。
（一）Nodejs和npm包管理器安裝
到NodeJs官方網站http://www.nodejs.org，下載相應平台的安裝包，我在下windows x64平台的安裝包，並按提示安裝完畢。NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：
• 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
• 允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
• 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。
由於新版的nodejs已經集成了npm，所以之前npm也一並安裝好了。
通過輸入”node -v” 和”npm -v” 來測試是否成功安裝。命令如下，出現版本提示表示安裝成功:
（二）Web開發包管理器Bower的安裝
按照Bower官方網站的描述：
Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.
Bower能夠為我們安裝和管理Web開發所需要的框架、庫、資源和實用工具。Bower的安裝方法：
利用npm來全局安裝bower，npm的全局安裝參數為 “-g”；
$ npm install -g bower
（三）編輯器Visual Studio Code（以下簡稱：VSCode） 的安裝
通過https://www.visualstudio.com/下載for Windows版Visual Studio Code。並按提示安裝完畢。
二、創建一個Electron應用
創建一個Electron應用的所有步驟：
- 創建一個項目文件夾；
- 在CMD命令行窗口中，進入該項目文件夾，通過npm init命令創建Electron應用所需的package.json文件；
- 在項目文件夾下，通過npm install –save-dev electron-prebuilt命令安裝項目所需的Electron環境；
- 在VSCode中創建啟動 JS 腳本文件；
- 在VSCode中創建一個入口HTML頁面；
- 運行該項目，查看效果；
- 將項目的運行命令與VSCode編輯器整合。
- 配置調試環境
（一）創建項目文件夾
創建一個項目文件夾，例如：AE_Sample，並在其下創建一個app目錄，app目錄主要用於存放你編寫的代碼，將代碼和運行調試相關的環境和第三方包區分開來，便於項目的維護。
需要注意以下兩個問題：
1. 盡量不要使用中文目錄。由於許多國外軟件對中文的支持問題，使用中文經常會導致意想不到的問題；
2. 盡量不要在Windows系統保護的目錄中（例如：windows、program files文件夾等）創建項目文件夾，避免因windows用戶權限問題帶來程序異常。
（二）創建並初始化package.json文件
package.json文件是基於NodeJS項目開發和npm包管理的一個配置文件，該配置文件包含了：開發環境的依賴、構建腳本、程序清單、項目入口、項目信息等信息。npm包的安裝需要該文件，基於NodeJS的項目同樣也需要該文件來運行項目。
可以通過兩種方式創建package.json文件：
1. 通過VSCode直接創建並編輯package.json文件。
該文件常規至少應該配置以下內容（特別是name和version項是必須的）：
{
name: "xxxx", //項目名稱（名稱不能包含大寫字母） version: "x.x.x", //項目版本 main: "xxxx.js" //項目入口腳本 } - 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
想了解更多請參考《package.json for NPM 文件詳解》。
2. 通過npm init來引導你創建一個package.json文件。
通常我們在創建一個NPM程序時，可以使用npm init命令，通過交互式的命令，自動生成一個package.json文件，里面包含了常用的一些字段信息，但遠不止這么簡單。通過完善package.json文件，我們可以讓npm命令更好地為我們服務。
在CMD中運行npm init命令后，它會項提示你輸入相應的配置信息，如果你不想輸入，可以直接按Enter回車，它會自動采用默認值，默認值在某些項后面的括弧中有提示，可以供你參考，但是如果你的項目文件夾如果采用了大寫字符，直接按回車也會出錯，提示錯誤為：Sorry, name can no longer contain capital letters.，因為name項的默認值是你的項目文件夾名稱，而name不允許包含大寫字母，所以會出現此錯誤。可以采用下划線“_”來分割名稱。
具體命令操作如下圖：
如果該項目不授權給其他人使用，可以在license項輸入：UNLICENSED，如果不輸入，系統將默認采用 ISC 許可。Package.json的其他配置內容也可以參考官方說明文件。輸入完成后，直接按Enter回車，就可以創建package.json文件，生成的文件內容如下：
{
"name": "ae_sample", "version": "1.0.0", "description": "", "main": "./app/main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "UNLICENSED" }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
3、安裝Electron依賴環境
Cmd進入項目文件下，運行命令：
npm install –save-dev electron-prebuilt
安裝項目所需的Electron環境，安裝完畢后，package.json文件會自動最追依賴選項的配置參數。
這里注意一下：npm install下載有時很困難，經常在下載環節卡住，無法完成包安裝進程，因此建議采用以下方法加快npm的下載速度：
以下摘自《加快npm的下載速度》
首先，我們的npm包無所謂安全性，所以不要使用性能和效率更慢的https，轉而使用http，相關命令如下：
(1)、關閉npm的https
npm config set strict-ssl false
(2)、設置npm的獲取地址
npm config set registry “http://registry.npmjs.org/”
一般這樣運氣的好的話，速度就會快許多，可能會安裝成功。如果你還臉黑，這樣設置還是一直卡住無法下載依賴，那就只能使用proxy代理方式來解決了，命令如下：
(3)、設置npm獲取的代理服務器地址：
npm config set proxy=http://代理服務器ip:代理服務器端口
清除npm的代理命令如下：
**npm config delete http-proxy
npm config delete https-proxy **也可以單獨為這次npm下載定義代理
npm install -g pomelo –proxy http://代理服務器ip:代理服務器端口
安裝過程出現的 npm WARN package.json 提示，不必管它，這些提示說的是 package.json 文件缺少一些配置項，但這些配置項並不影響你安裝Electron環境。
安裝完成后，項目文件夾中多了一個 node_modules 文件夾，我的電腦已經在全局或其他項目中安裝過Electron，所以安裝過程中並沒有出現下載過程，這也說明，如果你的電腦已經在全局或其他項目中安裝過 Electron，將不再需要下載。如果需要更新已安裝的包可以使用以下命令：
npm update electron-prebuilt
注意：這里有一個問題，node_modules 文件夾里面的目錄層級很深，所以想要刪除、復制和移動這個目錄，windows 會直接提示無法執行這些操作，因為 node_modules 目錄內文件的絕對路徑名長度超過了 windows 系統規定的長度。一個比較好的辦法是，利用 WinRAR 軟件，壓縮該目錄時，勾選“壓縮后刪除原來的文件(D)”選項可以解決這一問題。如果是復制或移動 node_modules 目錄的話也可以采用這個方法。
好了，基本環境就安裝完畢了！！！
接下來我們開始創建一個Hello World！的應用程序
4、首先創建一個入口程序 main.js
進入 VSCode 環境，在項目的app目錄下創建一個 main.js 文件。
main.js 是應用的入口。它負責創建主窗口和處理系統事件。main.js 的具體代碼如下：
代碼參考：Github上atom/electron項目的electron/docs/tutorial/quick-start.md 文件
// ./app/main.js //采用javascript嚴格模式 'use strict'; // 應用的控制模塊 const electron = require('electron'); const app = electron.app; // 創建原生瀏覽器窗口的模塊 const BrowserWindow = electron.BrowserWindow; var mainWindow = null; // 當所有窗口都關閉的時候退出應用 app.on('window-all-closed', function () { if (process.platform != 'darwin') { app.quit(); } }); // 當 Electron 結束的時候，這個方法將會生效 // 初始化並准備創建瀏覽器窗口 app.on('ready', function () { // 創建瀏覽器窗口. mainWindow = new BrowserWindow({ width: 800, height: 600 }); // 載入應用的 index.html mainWindow.loadUrl('file://' + __dirname + '/index.html'); // 打開開發工具 // mainWindow.openDevTools(); // 窗口關閉時觸發 mainWindow.on('closed', function () { // 想要取消窗口對象的引用，如果你的應用支持多窗口， // 通常你需要將所有的窗口對象存儲到一個數組中， // 在這個時候你應該刪除相應的元素 mainWindow = null; }); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
5、接下來我們創建一個HTML頁面，所謂應用的第一個窗體。
VSCode 中，在項目 app 目錄下創建一個 index.html 文件。為什么文件名是 index.html ，因為在前面的 main.js 中定義的載入應用頁面就是這個名字。index.html 的具體代碼如下：
<html> <title>My First Electron App</title> <body> <h1>Hello World!</h1> <h1>你好，世界!</h1> </body> </html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
6、運行這個應用
怎么運行呢，總共有三種方法：
（1）如果全局安裝了 Electron，可以在項目根目錄下運行：
electron .
注意：后面輸入空格之后有個“.”，代表當前目錄，electron 會根據前面配置的 package.json 文件自動找到程序入口並運行。記住 electron 后面必須是目錄名。
全局安裝命令如下：
npm install -g electron-prebuilt
雖然你全局安裝了 electron，但是建議項目目錄中仍然也安裝**electron環境。
（2）如果你沒有全局安裝electron-prebuilt，那么你可以通過如下方法來運行應用：
“node_modules/.bin/electron” .
或
“node_modules/.bin/electron” “.”
注意：后面有“.”。
（3）可以使用 gulp 工具來運行應用。
為了使用 gulp ，你必須安裝它，安裝命令如下：
以下摘自《前端構建工具gulpjs的使用介紹及技巧》
首先確保你已經正確安裝了nodejs環境。然后以全局方式安裝gulp：
npm install -g gulp
全局安裝gulp后，還需要在每個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中，然后在命令行中執行：
npm install gulp
如果想在安裝的時候把 gulp 寫進項目 package.json 文件的依賴中，則可以加上 –save-dev：
npm install –save-dev gulp
這樣就完成了 gulp 的安裝。至於為什么在全局安裝 gulp 后，還需要在項目中本地安裝一次，有興趣的可以看下 stackoverflow 上有人做出的回答：why-do-we-need-to-install-gulp-globally-and-locally、what-is-the-point-of-double-install-in-gulp。大體就是為了版本的靈活性，但如果沒理解那也不必太去糾結這個問題，只需要知道通常我們是要這樣做就行了。
安裝過程截圖如下：
安裝 gulp 完畢后，就可以通過創建 gulpfile.js 文件來創建一個 gulp task ，並且將任務和 Visual Studio Code 編輯器相結合，利用 Visual Studio Code 的快捷鍵 Ctrl + Shift + b 來運行應用了。
gulpfile.js文件代碼如下：
// 獲取依賴 var gulp = require('gulp'), childProcess = require('child_process'), electron = require('electron-prebuilt'); // 創建 gulp 任務 gulp.task('run', function () { childProcess.spawn(electron, ['.'], { stdio: 'inherit' }); }); - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
現在我們可以在項目根目錄下輸入：
gulp run
來運行應用。運行結果如下：
此結果出現中文亂碼，可以在index.html中加入一行解決這個問題：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - 1
- 1
完整代碼如下：
<html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My First Electron App</title> <body> <h1>Hello World!</h1> <h1>你好，世界!</h1> </body> </html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
再次運行 gulp run 命令，結果如下：
7、整合VSCode，利用VSCode快捷鍵執行項目操作。
先來檢驗一下，在上一節 gulp 的配置，是否 VSCode 的 task 能夠識別到 gulpfile.js 中定義的 run 任務。
VSCode環境中，按下 F1 或 Ctrl+Shift+p 鍵，可調出 VSCode 的命令輸入框，這個框內有一個 “>” 提示符，在其后可以輸入命令，在這里我們輸入 run，並在下拉結果列表中找到 Tasks：Run Task 命令點擊執行，隨后，出現 task 提示，VSCode 開始搜索可執行的 task 任務。
由於前面在 gulpfile.js 中定義了一個名為 “run” 的任務，片刻之后，找到了 run，點擊 run 即可運行項目，該方法與前面描述的所有項目啟動方法等效。
接下來，開始配置項目，讓其支持通過 VSCode 環境的 Ctrl+Shift+b 快捷鍵運行項目。
再次按下 F1 或 Ctrl+Shift+p 鍵，在命令框中輸入 task，並選擇 Tasks：Configure Task Runner，VSCode 會自動為你建立一個 .vscode 的目錄，並自動在其下創建一個 tasks.json 文件。這個文件已經自動完成了一些項目的配置工作，你可按照項目需要修改配置文件。下面是 VSCode 自動為你生成 task.json 文件內容：
{
"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": [ "--no-color" ], "tasks": [ ] }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
然后，按需修改為如下代碼：
{
"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": [ "--no-color" ], "tasks": [ { "taskName": "run", "args": [ ], "isBuildCommand": true } ] } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
保存文件，現在按下 Ctrl+Shift+b 就可以在 VSCode 中直接運行項目了，而不需要你在到 CMD 窗口中輸入命令了。
8、配置調試環境
點擊 VSCode 左邊的 Debug（Ctrl+Shift+D） 圖形按鈕，打開調試界面，再點擊上當齒輪配置按鈕，
並選擇 Node.js 調試器，
系統會自動為你在 .vscode 目錄下生成一個名為 launch.json 的文件。文件代碼如下：
{
"version": "0.2.0", "configurations": [ { "name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}\\app\\main.js", "stopOnEntry": false, "args": [ ], "cwd": "${workspaceRoot}", "preLaunchTask": null, "runtimeExecutable": null, "runtimeArgs": [ "--nolazy" ], "env": { "NODE_ENV": "development" }, "externalConsole": false, "sourceMaps": false, "outDir": null }, { "name": "Attach", "type": "node", "request": "attach", "port": 5858, "address": "localhost", "restart": false, "sourceMaps": false, "outDir": null, "localRoot": "${workspaceRoot}", "remoteRoot": null } ] } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
配置文件定義了兩種調試模式：Launch模式和Attach模式。
（1）Launch 模式，顧名思義，直接運行調試模式。
這種模式下，系統自動生成的配置文件不完整，需要你進一步完善以后，才能以調試模式運行程序。即，將Launch配置中的runtimeExecutable指定實際的運行環境絕對路徑。
"runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron.exe"- 1
- 1
修改后的配置文件內容如下：
{
"version": "0.2.0", "configurations": [ { "name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}\\app\\main.js", "stopOnEntry": false, "args": [ ], "cwd": "${workspaceRoot}", "preLaunchTask": null, "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron.exe", "runtimeArgs": [ "--nolazy" ], "env": { "NODE_ENV": "development" }, "externalConsole": false, "sourceMaps": false, "outDir": null }, { "name": "Attach", "type": "node", "request": "attach", "port": 5858, "address": "localhost", "restart": false, "sourceMaps": false, "outDir": null, "localRoot": "${workspaceRoot}", "remoteRoot": null } ] } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
然后，在配置下拉列表框中選擇“Launch”模式，並點擊 Start 按鈕或按 F5 即可以調試模式運行項目。
（2）Attach模式
配置文件中，自動生成的 Attach 模式配置信息已經完備，本學習項目無需修改。Attach 模式的工作原理大致是這樣的，首先讓 Node.js 或 Electron 以調試模式運行應用開啟端口監聽，然后 VSCode 啟動 Attach 模式，通過端口實現調試信息的交互。因此，我們需要進一步修改前面創建的 gulpfile.js 項目執行配置文件，將 electron 的啟動模式修改為調試模式，修改后的內容如下：
// 獲取依賴 var gulp = require('gulp'), childProcess = require('child_process'), electron = require('electron-prebuilt'); // 創建 gulp 任務 gulp.task('run', function () { childProcess.spawn(electron, ['--debug-brk=5858','.'], { stdio: 'inherit' }); }); - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
參數：–debug-brk=5858 以調試模式運行 Electron 應用，並使啟動時暫定在項目程序代碼的第一行，其調試監聽的端口號為 5858。如果你的斷點沒有設置在程序啟動階段的代碼上，你可以使用參數：–debug=5858。
注意：
- 請務必保證 gulpfile.js 中使用的端口號與 launch.json 文件中 Attach 配置的端口號一致，
這里我采用了 5858 端口。
- –debug-brk 暫停的第一行代碼一般不是你編寫的程序，多半是環境和第三方包的代碼。
配置完成后，采用如下步驟和方法開啟 Attach 模式，進行程序調試：
1）在配置下拉列表框中選擇好“Attch”模式；
2）按下 Ctrl+Shift+b，以調試監聽模式運行應用；
3）點擊 Start 按鈕或按 F5 即可以調試模式運行項目；
現在，我們來設置兩個斷點，一個在應用啟動階段，一個在應用關閉階段。
分別以 Launch 和 Attch 兩種模式運行調試，你會發現 Launch 模式兩個斷點均可捕獲到，
而 Attch 模式只能捕獲到第二斷點（應用關閉斷點）。
三、通過Git對項目進行版本控制
Git 是目前比較流行的分布式版本控制工具，你可以自行搭建 Git 服務器，也可以使用互聯網上提供的各種 Git 托管服務，
有的 Git 托管服務只對開源項目免費，有的則可以對開源和閉源項目都免費，例如：
- 開源中國 https://git.oschina.net/
- CSDN https://code.csdn.net/
- 阿里雲Code https://code.aliyun.com/ （提供持續交互平台）
下面以 CSDN 的代碼管理平台為例，每一個代碼平台都有使用說明文檔，下面參考阿里雲Code，感覺比CSDN的要寫的好一些。
1、在CSDN CODE上新建項目。
注冊CSDN賬號，登錄 https://code.csdn.net/ 新建項目
新建時，記住要把默認勾選的使用README.md文件初始化選項去掉，因為你是上傳已有項目。
2、安裝 Git。
如果 Git 下載沒有自動開始，您還可以在網站上手動下載。然后按照安裝窗口中的指示進行。完成安裝之后，打開一個新的 shell，然后再次運行 “git –version” 來驗證安裝是否正確。選擇適用於您操作系統的 shell：
- Mac OSX的Terminal
- Windows上的GitBash
- Linux上的Linux Terminal
3、生成SSH Keys
SSH key 可以讓你在你的電腦和Code服務器之間建立安全的加密連接。
在您的shell中（Windows下打開Git Bash），先執行以下語句來判斷是否已經存在本地公鑰：
cat ~/.ssh/id_rsa.pub
如果你看到一長串以 ssh-rsa或 ssh-dsa開頭的字符串, 你可以跳過 ssh-keygen的步驟。
提示: 最好的情況是一個密碼對應一個ssh key，但是那不是必須的。你完全可以跳過創建密碼這個步驟。
請記住設置的密碼並不能被修改或獲取。
你可以按如下命令來生成ssh key：
ssh-keygen -t rsa -C “你的Email地址”
這個指令會要求你提供一個位置和文件名去存放鍵值對和密碼，你可以點擊Enter鍵去使用默認值。
用以下命令獲取你生成的公鑰：
cat ~/.ssh/id_rsa.pub
復制這個公鑰放到你的個人設置中的SSH/My SSH Keys下，請完整拷貝從ssh-開始直到你的用戶名和主機名為止的內容。
如果打算拷貝你的公鑰到你的粘貼板下，請參考你的操作系統使用以下的命令：
Windows:
clip < ~/.ssh/id_rsa.pub
Mac:
pbcopy < ~/.ssh/id_rsa.pub
GNU/Linux (requires xclip):
xclip -sel clip < ~/.ssh/id_rsa.pub
4、在CSDN Code上添加你的公鑰
登錄CSDN后，點擊右上方“我的CODE”右側的齒輪配置圖標，進入“賬戶設置”頁面，並點擊添加公鑰按鈕，
輸入名稱和上一節復制到剪貼板的公鑰，點擊“保存”，即可完成公鑰添加操作。
5、添加Git用戶名並設置郵箱
您創建的每次Git提交都會使用該信息，所以很重要。
在您的shell中（Windows下打開Git Bash），運行如下命令來添加用戶名：
git config –global user.name 您的名字
然后驗證該配置是否正確：
git config –global user.name
使用如下命令設置郵箱地址：
git config –global user.email 您的郵箱地址
使用如下命令驗證郵箱設置是否正確：
git config –global user.email
由於使用了“–global”選項，所以您只需要做一次這樣的配置。Git會在您系統的任何項目中使用這個信息。
如果您希望在某個特定的項目中使用不同的用戶名和郵箱地址，可以在那個項目中重新運行該命令，但不加“–global”選項。
檢查您的信息
使用如下命令來驗證前面做的那些配置：
git config –global –list
6、Git的 .gitignore配置
.gitignore 配置文件用於配置不需要加入版本管理的文件，配置好該文件可以為我們的版本管理帶來很大的便利。
VSCode 中，在項目根目錄下，添加一個名為 “.gitignore” 的文件（當然，也可以
在 Git Bash 中使用 vim .gitignore 命令直接編輯添加 .gitignore 文件）。
並逐行你不希望加入版本控制的文件或文件夾輸入：
/node_modules
該配置文件語法：
- 以斜杠“/”開頭表示目錄；
- 以星號“*”通配多個字符；
- 以問號“?”通配單個字符
- 以方括號“[]”包含單個字符的匹配列表；
- 以嘆號“!”表示不忽略(跟蹤)匹配到的文件或目錄；
7、上傳項目
在 shell 中（Windows下打開Git Bash），使用如下命令初始化本地 git，並將項目 push 到 CODE 平台
cd <項目所在文件夾>
git init
git add .
git commit -m “first commit”
git remote add origin <項目url, 如git@code.csdn.NET:xxx/xxx.git>
git push -u origin master
Git SSH 地址 git@code.csdn.Net:xxx/xxx.git，在CSDN CODE的項目頁面可以復制。
如果你復制粘貼上面的命令執行失敗，請手動輸入以上命令，因為可能粘貼的內容可能有Git Bash無法識別的字符。
注意：我上面的操作中就因為直接復制粘貼git commit -m “first commit”語句出現過一次錯誤。第二次采用手動輸入。
在后續的開發過程中，可以不再使用 Git Bash 方式提交代碼，可以采用VSCode集成的Git界面進行操作。
例如，當我修改index.html文件后，在VSCode右側的Git按鈕上會顯示有一個修改未提交。
點擊Git按鈕，打開Git界面，在Message框中輸入提交說明信息，然后按下Ctrl + Enter 鍵或點擊上方勾
按鈕，提交修改。然后點上方的“…”菜單按鈕，並點擊“Push”完成上傳操作。
