Electron學習（一）——— electron的安裝

前言

　　本人是作java開發的（菜鳥），作web項目的朋友們基本上都會遇到一樣一個，永遠不知道客戶會怎麼樣使用，或者說永遠不知道客戶會用什麼瀏覽器打開咱們作出來的應用，就算你跟他說明了必定得用某某某瀏覽器打開，仍是有人會用別的瀏覽器打開，這種狀況一般咱們會去作適配（前端），最近公司有需求要把一個項目作成Windows桌面應用，因爲咱們公司的前端工程師恰好離職了，而後就由我去看這塊，爲了方便之後的查閱和記錄學習過程，決定寫下這篇文章，但願有看到的會用electron的朋友指點一下。

 

簡介

　　electron是由GitHub開發，用CSS、HTML和JavaScript來構建跨平臺桌面應用程序的一個開源庫，Electron經過將Chrom和Node.js合併到同一個運行時環境中，並將其打包爲Mac、Windows和Linux系統下的應用來實現這一目的。

　　官網地址：http://electronjs.org/

　　官方文檔地址：http://electronjs.org/docs/

 

安裝

　　安裝說明：

• 安裝環境爲Windows10，用的命令行程序是PowerShell
• 文字背景顏色含義：黃色的是命令行命令，紅色的是必須項（只會出如今代碼行中，意思是必需要這樣寫）
• 安裝electron前確保安裝環境下能在命令行中執行npm命令（也就是說肯定環境下安裝了node.js），檢查方式：在命令行中輸入 npm -version 查看npm（node.js）的版本

　　步驟：

1. 在任何一個磁盤上建立一個空的文件夾（如，在F盤下建立一個名字叫test的文件夾，則路徑爲：F:\test，下文用到路徑的都用此路徑）
2. 打開PowerShell進入到F:\test，能夠直接在F:\test中按shift+右鍵，而後選擇「在此處打開PowerShell窗口」，可是這樣打開的不是以管理員身份打開的，建議仍是用管理員身份打開，用管理員身份打開的方式是，在任務欄window圖標地方按右鍵，而後點擊「Windows PowerShell(管理員)」，而後在PowerShell中輸入並執行 cd F:\test 
3. 初始化一個node.js的項目，在命令行中輸入並執行： npm init ，執行後根據提示輸入相應的信息（也能夠一直按回車，不輸入任何東西，用它的默認值），完成後在F:\test目錄下會多出一個 packet.json的文件（注意：操做完這步後命令行不要關閉）
4. 編輯剛剛生成的packet.json，用文本編輯器打開packet.json，根據實際狀況編輯內容，能夠參考如下配置

    1 //初始化後文檔內容（一直按回車生成的）
    2 
    3 {
    4 
    5   "name": "testtwo",
    6 
    7   "version": "1.0.0",
    8 
    9   "description": "",
   10 
   11   "main": "index.js",
   12 
   13   "scripts": {
   14 
   15     "test": "echo \"Error: no test specified\" && exit 1"
   16 
   17   },
   18 
   19   "author": "",
   20 
   21   "license": "ISC"
   22 
   23 }
   24 
   25  
   26 
   27 //修改後的內容
   28 
   29 {
   30 
   31   "name": "testtwo",
   32 
   33   "version": "1.0.0",
   34 
   35   "description": "",
   36 
   37   "main": "main.js",
   38 
   39   "scripts": {
   40 
   41     "start": "electron ."
   42 
   43   },
   44 
   45   "author": "",
   46 
   47   "license": "ISC"
   48 
   49 }

   View Code
5. 配置完以後就是安裝electron，回去剛剛的命令行（若是關掉了的話重複操做步驟2），輸入並執行 npm install --save-dev electron，而後electron就安裝完成了