Node.js和Electron安装教程

一,术语

  1. npm:Nodejs下的包管理器。
  2. webpack:它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
  3. vue-cli:用户生成Vue工程模板。

二、安装Node.js

  1. npm:Nodejs下的包管理器。
  2. webpack:它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
  3. vue-cli:用户生成Vue工程模板。

1、Node.js简介

  • Node.js是一个C++编写的基于Chrome V8引擎的服务端JavaScript运行环境(runtime environment),发布于2009年5月。

  • Node.js是一个服务器端开发平台,类似的平台还有Java、PHP、Perl、Ruby等。

  • Node.js的包管理器NPM,是全球最大的开源生态库系统。

  • 目前Node.js的最新版本是7.6.x。首先,从Node.js官网下载对应平台的安装程序。

  2,目前Node.js的最新版本是7.6.x。首先,从Node.js官网下载对应平台的安装程序。

Node.js和Electron安装教程_第1张图片

这里我们安装node-v7.6.0-x86.msi

安装界面如下

Node.js和Electron安装教程_第2张图片

3,在Windows上安装时,务必选择全部组件,包括勾选【Add to Path】

Node.js和Electron安装教程_第3张图片

4,安装完成后,在Widnows环境下,打开命令行提示符,然后输入node -v,如果安装正常,可以看到如下输出:

Node.js和Electron安装教程_第4张图片

5,继续在命令行提示符输入node,此刻你将进入Node.js的交互环境。在交互环境中,你可以任意输入JavaScript语句,

例如100+200,回车将得到输出结果:

Node.js和Electron安装教程_第5张图片

6,要退出Node.js环境,连续按两次Ctrl+C。

Node.js和Electron安装教程_第6张图片

 

三,安装NPM 

1,NPM简介

NPM(Node Package Manager)是Node.js的包管理工具(package manager)。
           NPM是随同Node.js一起安装的包管理工具,能解决Node.js代码部署上的很多问题,常见的使用场景有以下几种情况。
          (1)    允许用户从NPM服务器下载别人编写的第三方包到本地使用。
          (2)    允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
          (3)    允许用户将自己编写的包或者命令行程序上次到NPM服务器供别人使用。

2,安装步骤

由于最新版本的Node.js已经集成了NPM,所以NPM也一并安装好了。

Node.js和Electron安装教程_第7张图片

3,NPM使用介绍

https://www.runoob.com/nodejs/nodejs-npm.html

四,安装electron

 1,使用nmp命令安装electron,输入以下命令

      >nmp install -g electron

Node.js和Electron安装教程_第8张图片

 

2, 查看是否安装完成,输入以下命令

>electron -v

Node.js和Electron安装教程_第9张图片

五,electron官方实例 

1,clone代码

从GitHub上下载实例代码

>git close https://github.com/electron/electron-quick-start

Node.js和Electron安装教程_第10张图片

2,进入electron-quick-start目录下

>cd electron-quick-start

Node.js和Electron安装教程_第11张图片

3,安装项目依赖

>npm install

Node.js和Electron安装教程_第12张图片

4,启动项目

>npm start

启动软件如下:

Node.js和Electron安装教程_第13张图片

六,打包

根据平台打包成一个.exe文件,打包方法:

cnpm run packager

package.json中的打包配置

electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>

electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=./pazq.ico --out=./ElectronApp --version=0.0.1

 

 

 

你可能感兴趣的:(Windows)