呼呼 終於來到第六天啦!恭喜大家,代表我們已經走完六分之一的路程呢,嘎油嘎油
今天呢!就是要和各位一起來安裝 node.js 啦
首先,就是進入我們的安裝頁面了 ----> node.js 下載
進來後,直接點選我們用紅色方框圈起來的 16.16.0 LTS 就可以開始下載了!
下載完成後打開的 msi 檔,如下圖
點選 Next 後,會出現下圖
打勾他上面的選項 (I eccept the...),一樣點選 Next
選擇你想要的路徑,如果沒有特別要求的,也一樣點選 Next
再來是選擇你想要的安裝模式,然後也一樣 Next
這邊也是一樣 Next 就好!
最後一步了!點擊 Install 後,就只要等他安裝好就行囉 ~
安裝完成後,就會出現上圖的畫面啦,點擊 Finish 讓他退出安裝導向
這樣我們的 node.js 就下載成功了!恭喜大家啦~
別以為安裝完成後就沒事囉!再來我們就要和大家進行驗證了
才能知道 Node.js 有沒有正確安裝呦
那我們要如何驗證呢?最簡單的測試方法就是看我們的程式是否能夠做到文字顯示
首先,我們先打開電腦的命令提示字元,也就是終端機,並輸入 node ,如下圖
再來直接輸入 「56+12」,如果他有回應我們「68」,那就代表你成功囉 ~ 讚讚
既然各位都下載完成了,也驗證過是成功且可以被使用的
那接下來我們就實際來實作看看吧,新手也可以做出來的 node.js 呦
首先,先開啟我的命令提示字元 (終端機),並建立一個新的目錄:NewNode,指令:mkdir NewNode
建立好請幫我直接 cd 進去!,指令:cd NewNode
第二步呢,就是建立一個「 app.js 」的 JavaScript 檔案,並在檔案內新增一個名為 "msg" 的變數。指令:echo var msg > app.js
再來就是直接打開我們的 vs code 啦 !指令:code .
進入 vs code 後,可以看到我們的畫面會長下圖這樣
下一步呢,就是在我們的 app.js檔案中,設定變數 msg 為 "Hello World",並將我們的 "msg" console出來
再來的話,就是要讓我們的 node.js 去執行 app.js 的檔案。首先就是打開我們 vs code 的終端機,在上方的功能列表中,選取[終端機]>[新增終端]
,像這樣
就可以叫出我們的終端機啦!然後在終端機中輸入指令:node app.js
如果他有回應你 Hello World ,就代表我們這次的 node.js 實作成功啦,是不是很簡單呢
上一篇也有跟各位簡易介紹了 npm 是甚麼。相信看到這邊的你們也已經安裝好 node.js 與 npm 了吧。那接下來我們就來試著透過 npm 去安裝看看 express 吧 ~ 請各位跟著我的腳步,一起實際操作看看吧!
首先呢,第一步就是要先初始化我們的 npm,如果在下載 node.js 的時候沒有更改路徑的,沒意外的話將會在我們本機的 Program Files 裡,如下圖!
接著直接在此目錄開起命令提示字元,如圖在路徑欄輸入 cmd
後,Enter 按下去
接著就是在我們的命令提示字元中輸入指令:npm init
。如果跟下圖相同就是成功的
而上圖的最後,是系統問我們說:要將你的 package 命名為什麼呢? 取好名字後按 Enter 即可。那這時!系統會回你 version: (8.1.0)
,別以為是電腦怎麼了喔!這是非常正常的,告訴你 npm 的明細
接著再 Enter 2次,直到出現一段 JSON 格式的程式碼,如下圖這樣,最後再輸入 yes
,就成功了!
然後呢,就可以看到我們所在目錄的檔案總管中出現了一個名為 package.json 的文件
打開之後可以看到裡面的內容是儲存與項目相關的訊息,接者我們開始來安裝 express 的模塊,打開 vs code 的終端機 ( [上方功能列]>[終端機]>[新增終端] )
然後在裡面輸入 npm i express
,意思是讓 npm 開始安裝我們的 express 模塊
如下圖,這樣就代表我們安裝成功了! (*≧ω≦)
安裝成功後,就可以到我們的 package.json 裡了,可以看到多出一組訊息
代表未來我們在做專案時,就可以依賴我們的 express 第三方模塊
而之後不管是下載哪些第三方模塊,都會在此出現,直接使用 require 來導入 require 就行了
var express=require("express");
補充一點!如果用不到模塊,想要卸除時,只要打開我們的終端機,接著直接輸入npm uninatall express
這樣就可以完成卸載囉,讚讚
那今天對那今天對於 Node.js 與 npm 的安裝就到這裡告一段落拉,謝謝各位!
明天就來和各位聊聊「什麼是 Vue」!掰鋪 >///<