iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0
Modern Web

不用去柬埔寨也能活摘 Vue系列 第 6

[Vue] Day6 Node.js 安裝教學及簡易實作

  • 分享至 

  • xImage
  •  

呼呼 終於來到第六天啦!恭喜大家,代表我們已經走完六分之一的路程呢,嘎油嘎油
/images/emoticon/emoticon07.gif

今天呢!就是要和各位一起來安裝 node.js 啦

node.js 安裝教學

首先,就是進入我們的安裝頁面了 ----> node.js 下載

進來後,直接點選我們用紅色方框圈起來的 16.16.0 LTS 就可以開始下載了!
下載完成後打開的 msi 檔,如下圖

點選 Next 後,會出現下圖

打勾他上面的選項 (I eccept the...),一樣點選 Next

選擇你想要的路徑,如果沒有特別要求的,也一樣點選 Next

再來是選擇你想要的安裝模式,然後也一樣 Next

這邊也是一樣 Next 就好!

最後一步了!點擊 Install 後,就只要等他安裝好就行囉 ~

安裝完成後,就會出現上圖的畫面啦,點擊 Finish 讓他退出安裝導向
這樣我們的 node.js 就下載成功了!恭喜大家啦~
/images/emoticon/emoticon42.gif

別以為安裝完成後就沒事囉!再來我們就要和大家進行驗證了
才能知道 Node.js 有沒有正確安裝呦

驗證

那我們要如何驗證呢?最簡單的測試方法就是看我們的程式是否能夠做到文字顯示
首先,我們先打開電腦的命令提示字元,也就是終端機,並輸入 node ,如下圖

再來直接輸入 「56+12」,如果他有回應我們「68」,那就代表你成功囉 ~ 讚讚


/images/emoticon/emoticon07.gif

既然各位都下載完成了,也驗證過是成功且可以被使用的
那接下來我們就實際來實作看看吧,新手也可以做出來的 node.js 呦

建立 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 第三方模塊 express 安裝

上一篇也有跟各位簡易介紹了 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」!掰鋪 >///<
/images/emoticon/emoticon55.gif


上一篇
[Vue] Day5 認識 Node.js 及 npm
下一篇
[Vue] Day7 什麼是 Vue.js?
系列文
不用去柬埔寨也能活摘 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言