Angular+Electron+VSCode的桌面应用
Angular+Electron+VSCode的桌面应用
转自：http://blog.csdn.net/yr7942793/article/details/50986696javascript
第一部分 Electron开发入门笔记
GitHub 的 Electron 框架（之前叫作 Atom Shell）容许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用。它是 io.js 运行时的衍生，专一于桌面应用而不是 web 服务端。Electron 丰富的原生 API 使咱们可以在页面中直接使用 JavaScript 获取原生的内容。html
本文学习的主要知识来自 【译】使用 AngularJS 和 Electron 构建桌面应用 http://www.javashuo.com/article/p-wpjahegj-z.html前端
1、基础环境的搭建
为了安装相应的开发环境和运行库，首先须要安装如下两个东西：
一、安装Nodejs和npm包管理器
二、安装Bower（Web开发包管理器）
三、代码编辑器（Visual Studio Code）java
本文学习测试的环境为Windows 10。node
（一）Nodejs和npm包管理器安装
到NodeJs官方网站http://www.nodejs.org，下载相应平台的安装包，我在下windows x64平台的安装包，并按提示安装完毕。NPM是随同NodeJS一块儿安装的包管理工具，能解决NodeJS代码部署上的不少问题，常见的使用场景有如下几种：
• 容许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 容许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 容许用户将本身编写的包或命令行程序上传到NPM服务器供别人使用。
因为新版的nodejs已经集成了npm，因此以前npm也一并安装好了。linux
经过输入”node -v” 和”npm -v” 来测试是否成功安装。命令以下，出现版本提示表示安装成功: git
（二）Web开发包管理器Bower的安装
按照Bower官方网站的描述：
Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.angularjs
来自 http://bower.ioweb
Bower可以为咱们安装和管理Web开发所须要的框架、库、资源和实用工具。Bower的安装方法：
利用npm来全局安装bower，npm的全局安装参数为 “-g”；shell
$ npm install -g bower
（三）编辑器Visual Studio Code（如下简称：VSCode） 的安装
经过https://www.visualstudio.com/下载for Windows版Visual Studio Code。并按提示安装完毕。
2、建立一个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
三、安装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！的应用程序
四、首先建立一个入口程序 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
五、接下来咱们建立一个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
六、运行这个应用
怎么运行呢，总共有三种方法：
（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 命令，结果以下：
七、整合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 窗口中输入命令了。
八、配置调试环境
点击 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 模式只能捕获到第二断点（应用关闭断点）。
3、经过Git对项目进行版本控制
Git 是目前比较流行的分布式版本控制工具，你能够自行搭建 Git 服务器，也可使用互联网上提供的各类 Git 托管服务，
有的 Git 托管服务只对开源项目免费，有的则能够对开源和闭源项目都免费，例如：
- 开源中国 https://git.oschina.net/
- CSDN https://code.csdn.net/
- 阿里云Code https://code.aliyun.com/ （提供持续交互平台）
下面以 CSDN 的代码管理平台为例，每个代码平台都有使用说明文档，下面参考阿里云Code，感受比CSDN的要写的好一些。
一、在CSDN CODE上新建项目。
注册CSDN帐号，登陆 https://code.csdn.net/ 新建项目
新建时，记住要把默认勾选的使用README.md文件初始化选项去掉，由于你是上传已有项目。
二、安装 Git。
若是 Git 下载没有自动开始，您还能够在网站上手动下载。而后按照安装窗口中的指示进行。完成安装以后，打开一个新的 shell，而后再次运行 “git –version” 来验证安装是否正确。选择适用于您操做系统的 shell：
- Mac OSX的Terminal
- Windows上的GitBash
- Linux上的Linux Terminal
三、生成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
四、在CSDN Code上添加你的公钥
登陆CSDN后，点击右上方“个人CODE”右侧的齿轮配置图标，进入“帐户设置”页面，并点击添加公钥按钮，
输入名称和上一节复制到剪贴板的公钥，点击“保存”，便可完成公钥添加操做。
五、添加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
六、Git的 .gitignore配置
.gitignore 配置文件用于配置不须要加入版本管理的文件，配置好该文件能够为咱们的版本管理带来很大的便利。
VSCode 中，在项目根目录下，添加一个名为 “.gitignore” 的文件（固然，也能够
在 Git Bash 中使用 vim .gitignore 命令直接编辑添加 .gitignore 文件）。
并逐行你不但愿加入版本控制的文件或文件夹输入：
/node_modules
该配置文件语法：
- 以斜杠“/”开头表示目录；
- 以星号“*”通配多个字符；
- 以问号“?”通配单个字符
- 以方括号“[]”包含单个字符的匹配列表；
- 以叹号“!”表示不忽略(跟踪)匹配到的文件或目录；
七、上传项目
在 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”完成上传操做。
- 1. JS桌面应用
- 2. nodejs的桌面应用（electron）
- 3. Flutter开发桌面应用-第一个windwos桌面应用
- 4. 用electron写桌面应用
- 5. Web桌面应用框架3：Web桌面应用开发的N种Style
- 6. Web桌面应用框架2：著名的WEB桌面应用分析
- 7. Vue+Echarts+electron 桌面应用
- 8. Java桌面应用程序
- 9. Linux 桌面应用程序
- 10. NW.js构建桌面应用
- 更多相关文章...
- • Maven Web 应用 - Maven教程
- • XML 应用程序 - XML 教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。