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.

来自 http://bower.io

Bower能够为我们安装和管理Web开发所需要的框架、库、资源和实用工具。Bower的安装方法:
利用npm来全局安装bower,npm的全局安装参数为 “-g”;

$ npm install -g bower

来自 http://bower.io

(三)编辑器Visual Studio Code(以下简称:VSCode) 的安装

通过https://www.visualstudio.com/下载for Windows版Visual Studio Code。并按提示安装完毕。

二、创建一个Electron应用

创建一个Electron应用的所有步骤:

  1. 创建一个项目文件夹;
  2. 在CMD命令行窗口中,进入该项目文件夹,通过npm init命令创建Electron应用所需的package.json文件;
  3. 在项目文件夹下,通过npm install –save-dev electron-prebuilt命令安装项目所需的Electron环境;
  4. 在VSCode中创建启动 JS 脚本文件;
  5. 在VSCode中创建一个入口HTML页面;
  6. 运行该项目,查看效果;
  7. 将项目的运行命令与VSCode编辑器整合。
  8. 配置调试环境

(一)创建项目文件夹

创建一个项目文件夹,例如: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 的配置,是否 VSCodetask 能够识别到 gulpfile.js 中定义的 run 任务。

VSCode环境中,按下 F1Ctrl+Shift+p 键,可调出 VSCode 的命令输入框,这个框内有一个 “>” 提示符,在其后可以输入命令,在这里我们输入 run,并在下拉结果列表中找到 Tasks:Run Task 命令点击执行,随后,出现 task 提示,VSCode 开始搜索可执行的 task 任务。

由于前面在 gulpfile.js 中定义了一个名为 “run” 的任务,片刻之后,找到了 run,点击 run 即可运行项目,该方法与前面描述的所有项目启动方法等效。

接下来,开始配置项目,让其支持通过 VSCode 环境的 Ctrl+Shift+b 快捷键运行项目。

再次按下 F1Ctrl+Shift+p 键,在命令框中输入 task,并选择 Tasks:Configure Task RunnerVSCode 会自动为你建立一个 .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.jsElectron 以调试模式运行应用开启端口监听,然后 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 即可以调试模式运行项目;

现在,我们来设置两个断点,一个在应用启动阶段,一个在应用关闭阶段。

分别以 LaunchAttch 两种模式运行调试,你会发现 Launch 模式两个断点均可捕获到,
Attch 模式只能捕获到第二断点(应用关闭断点)。

三、通过Git对项目进行版本控制

Git 是目前比较流行的分布式版本控制工具,你可以自行搭建 Git 服务器,也可以使用互联网上提供的各种 Git 托管服务,
有的 Git 托管服务只对开源项目免费,有的则可以对开源和闭源项目都免费,例如:

下面以 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,并将项目 pushCODE 平台

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”完成上传操作。

Angular+Electron+VSCode的桌面应用的更多相关文章

  1. electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  2. electron+vue制作桌面应用--自定义标题栏

    electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分 ...

  3. electron 前端开发桌面应用

    electron是由Github开发,是一个用Html.css.JavaScript来构建桌面应用程序的开源库,可以打包为Mac.Windows.Linux系统下的应用. 快速开始 接下来,让代码来发 ...

  4. Vue+Electron实现简单桌面应用

    之前一直使用C#编写桌面应用,也顺带写一些Web端应用.最近在看node时发现常用的vscode是用electron编写的,一种想吃螃蟹的念头就涌了上来. 在网上找了找electron的资料,也研究了 ...

  5. [mobile angular ui 1.2]桌面环境下如何自动隐藏左侧的sidebar?how to hide left sidebar on desktop browser by default?

    使用mobile angular ui 1.2开发,在默认情况下,桌面浏览器中sidebar-left是默认打开的,怎么才能在程序初始打开时关闭sidebar-left呢? 目前我找到的唯一可行办法就 ...

  6. Electron与WEB桌面应用程序开发及其它

    这几天在构思项目,研究了一下Electron,记录下来. 说起WEB桌面程序,当前最火的就是Electron了. Electron的架构用一句话总结,就是一个main.js进程加上一个或数个chrom ...

  7. Electron开发跨平台桌面程序入门教程

    最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快.我会在这一篇文章中实现一个HelloWord ...

  8. 将现有vue项目基于electron打包成桌面应用程序

    一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目 ...

  9. electron 打包成桌面运用

    最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从 ...

随机推荐

  1. go语言基础之函数只有一个返回值

    1.函数只有一个返回值 示例1: package main //必须有一个main包 import "fmt" func myfunc01() int { return 666 } ...

  2. javascript模拟post提交

    通过js模拟post提交1:请求需要的参数过长,超过get允许的最大长度2:想要隐藏地址栏的参数 //新创建一个form表单document.write('<form name=myForm&g ...

  3. Android Logger日志系统

    文件夹 文件夹 前言 执行时库层日志库liblog 源代码分析 CC日志写入接口 Java日志写入接口 logcat工具分析 基础数据结构 初始化过程 日志记录的读取过程 前言 该篇文章是我的读书和实 ...

  4. XMPPFrameWork IOS 开发(三)登录

    原始地址:XMPPFrameWork IOS 开发(三) XMPP中常用对象们: XMPPStream:xmpp基础服务类 XMPPRoster:好友列表类 XMPPRosterCoreDataSto ...

  5. Unity3d使用json与javaserver通信

    Unity3d使用json能够借助LitJson 下载LitJson,复制到Unity3d工作文件夹下 于是能够在代码中实现了 以下发送请求到server并解析 System.Collections. ...

  6. 软件开发工具GCC

    重点掌握以下知识点: 了解gcc编译器的下载和安装方法,包括嵌入式交叉编译平台搭建的方法 重点掌握gcc的基本编译流程和编译方法 重点掌握gcc编译的高级操作及选项 了解gcc编译器性能分析工具,包括 ...

  7. 算法笔记_128:完美洗牌算法(Java)

    目录 1 问题描述 2 解决方案 2.1位置置换算法 2.2 走环算法   1 问题描述 有一个长度为2n的数组{a1,a2,a3,...,an,b1,b2,b3,...,bn},希望排序后变成{a1 ...

  8. 算法笔记_046:跳台阶问题(Java)

    目录 1 问题描述 2 解决方案 2.1 递归法 2.2 迭代法   1 问题描述 一个台阶总共有n级,如果一次可以跳1级,也可以跳2级,求总共有多少种跳法. 2 解决方案 2.1 递归法 如果整个台 ...

  9. android开机启动代码

    1)public class StartupReceiver extends BroadcastReceiver { @Override public void onReceive(Context c ...

  10. javascript 面向对象编程(工厂模式、构造函数模式、原型模式)

      javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /** * 工厂模 ...