未加星标

Getting Started With Electron JS With Visual Studio Code

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

ElectronJS is an open-source framework, which was developed by GitHub and it is written in c++ and javascript. The basic use of this jQuery Framework is to allow the development of desktop GUI. ElectronJS uses the Node.js runtime and Chromium Web Browser to make Application GUI. Chromium is an open-source Web Browser, which was developed by Google. It is originally used for the development of backend Web Applications. Electron is the main framework behind two notable open-source source code editors: GitHub's Atom and Microsoft's Visual Studio Code. You may go to his official Web site to download his current framework either by the github clone link or go to GitHub and download it as the repository, mentioned in the Web site link .


Getting Started With Electron JS With Visual Studio Code

Before proceding further, we need to understand the electron framework. I am using Visual Studio code IDE for the development.


Getting Started With Electron JS With Visual Studio Code

Visual Studio Code is a new IDE (integrated development environment/ source code editor). It is developed by Microsoft for all other operating systems. It can be used by windows, linux and MacOS. Visual Studio Code supports debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets and many more.

Visual Studio Code has great support for other languages apart from C#, F# etc. Here, we can debug our JavaScript code as well as the full control on insentience.


Getting Started With Electron JS With Visual Studio Code

The image, shown above depicts the full list of plug-in which, Visual Studio Code supports.

From now, we will move to Electron from framework. I suppose, you have node.js installed in your computer. Please check the Environment variable of the node.js.

Step 1

Create a Project folder and give a meaningful name, get the all electron files from the GitHub. If you are to consider the following image, I am using git bash to get the clone of the electron framework. For it, copy the URL from the Website or the image, shown above and paste the code in git command Window.
Getting Started With Electron JS With Visual Studio Code

Step 2

Rename the "electron-quick-start" to a meaningful name. As of now, in this article, it was changed to "app" and change the directory to app. It is not compulsory. We will install the electron packages in our project, using the npm install command.


Getting Started With Electron JS With Visual Studio Code

Step 3

Start npm. Using "npm start" command, after hitting command, you will able to see a new Window; either we will use the git command prompt or use the integrated terminal from Visual Studio Code. It will be available in View->Integrated Terminal. Here, we will handle all the commands.

After hitting npm start, we will be able to see a new Window, as shown in the image, given below.


Getting Started With Electron JS With Visual Studio Code

In the next article, we will go deep dive into the ElectronJS.

Summary

This is an article, which describes the new JavaScript framework known as Electron. This framework is used to create a native Application, using CSS, HTML and JavaScript. It will be simple, if you are able create a Website. This framework will take care of all the hard parts.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Getting Started With Electron JS With Visual Studio Code
本站链接:http://www.codesec.net/view/482485.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(37)