第一節：nodejs簡介/安裝/用法 及 npm、nrm、VsCode的使用

一. nodejs簡介/安裝/使用

1. 簡介

　Node是一個基於Chrome V8引擎的JavaScript代碼運行環境。

(1). 瀏覽器（軟件）能夠運行JavaScript代碼，瀏覽器就是JavaScript代碼的運行環境。

(2). Node（軟件）能夠運行JavaScript代碼，Node就是JavaScript代碼的運行環境。

2. 安裝

(1). 直接去nodejs官網（ http://nodejs.cn/ ）下載安裝包即可，這里下載window版本14.16。

 

(2). 直接下一步安裝到底即可，自動安裝了npm，並且配置了nodejs和npm的路徑到系統環境變量中。

(3). 通過輸入命令【node -v】，如下圖，表示安裝成功。

(4). 查看自動配置的環境變量。 

A. 系統變量Path中多了nodejs的路徑。

B. 用戶變量Path中多了npm全局下載文件的保存路徑。

擴展補充變量的作用：

　比如以chrome瀏覽器為例，通過屬性查看它的安裝路徑為：C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe  ，我找到這個chrome.exe程序，雙擊就可以打開。

這個時候我想在命令行中輸入【chrome】直接打開（也就是exe的文件名），這就需要配置環境變量了，需要把 前面的路徑【C:\Users\Administrator\AppData\Local\Google\Chrome\Application\】加到環境變量path中，然后重啟命令行，輸入chrome指令，就可以打開chrome了。

3. 使用

(1). nodejs的組成

(2). nodejs的用法 

　直接在js的路徑下，運行指令【node xx.js】,就可以運行該js文件了。 

 

4. 模塊加載機制

(1). 規則1：當模塊有路徑，但是沒有后綴。

(2). 規則2：當模塊沒有路徑，也沒有后綴。

 

二. npm、nrm相關用法

 更詳細的命令可以參考之前的文章：https://www.cnblogs.com/yaopengfei/p/7551647.html

1.npm

(1). 含義

　npm是Node.js的包管理器，是全球最大的開源生態庫。

　參考地址：  官方網站：https://www.npmjs.com/

                        淘寶鏡像：https://npm.taobao.org/

PS：nodejs安裝完畢后，會自動安裝npm，可以通過指令【npm -v】來查看npm的版本號。

(2). 相關指令

　參考：http://www.mamicode.com/info-detail-2579787.html     https://www.cnblogs.com/MoYu-zc/p/15004540.html

初始化

【npm init】      初始化生成package.json文件，一步步選擇。
【npm init -y】   初始化生成package.json文件，直接生成，省略了一步一步的步驟了。

查看指令

　【npm view xxxx versions】查看某個包的所有可下載的版本號，如：  npm view jquery versions　　

安裝指令

　【npm install】      一鍵安裝package.json中定義好的模塊

　【npm install xxxx】  安裝指定模塊， 此命令會將包安裝到node_modules中，但是不會修改package.json，執行npm install時也不會自動安裝 。（現在模式直接安裝成生成依賴了，等價於【npm i xxx -S】）

　【npm install xxxx xxxx】 安裝多個模塊

　【npm install xxxx -g】     全局安裝指定模塊

　【npm install [e-mail].x】 安裝指定版本的模塊，如【npm install element-ui@2.15.1】

　【npm install xxxx --save】 安裝指定的包為生產依賴，對應package.json中的dependecies節點中。  簡寫：【npm i xxxx -S】

　【npm install xxxx --save-dev】 安裝指定的包為開發依賴，對應package.json中的devDependencies節點中，簡寫：【npm i xxxx -D】

刪除指令

　【npm uninstall xxx】 刪除局部依賴的模塊。

　【npm uninstall xxx -g】 刪除全局模塊

其它

　【npm cache clean -f】 清空npm緩存

更新指令

　【npm updata xxxx@xxx】 本地更新指定包指定版本    【最新版本：  npm install xxxx@latest】

　【npm update xxxx@xxx -g】 全局更新指定包指定版本  【最新版本：npm install xxxx@latest -g】

　【npm update -g】 全局一鍵更新

PS: 補充一個本地項目一鍵更新的方法：先要全局安裝npm-check 【npm install npm-check-updates -g】

　　然后：【ncu -u】→【npm install】

(或者先刪除，后安裝

　【npm uninstall xxxx】刪除

　【npm install xxxx -D】or 【npm install xxxx -S】自動在本地項目中將指定包更新到最新版本。 

　【npm install xxxx -g】將指定包全局更新到最新版本

)

(3). 切換全局下載路徑

　這里以 D:\Develop\npm 路徑的設置為例。

A. 設置用戶的環境變量Path（非系統環境變量），如下圖 ，被替換的原路徑為：C:\Users\Administrator\AppData\Roaming\npm

B. 進入cmd命令，輸入【 npm config set prefix "D:\Develop\npm" 】回車，這是在配置npm的全局安裝路徑，然后在用戶文件夾下會生成一個.npmrc的文件，用記事本打開后可以看到如下內容：（如果不是，手動編輯）

prefix=D:\Develop\npm
cache=D:\Develop\npm-cache

 

C. 重新打開控制台，輸入指令【npm install -g jquery】進行測試。 到對應路徑下，發現jquery已經安裝成功。

(5). package.json文件

A. 含義

　項目描述文件，記錄了當前項目信息，例如項目名稱、版本、作者、github地址、當前項目依賴了哪些第三方模塊等。使用npm init -y命令生成。

B. 項目依賴

　在項目的開發階段和線上運營階段，都需要依賴的第三方包，稱為項目依賴

　使用【npm install 包名】命令下載的文件會默認被添加到 package.json 文件的 dependencies 字段中

C. 開發依賴

　在項目的開發階段需要依賴，線上運營階段不需要依賴的第三方包，稱為開發依賴。

　使用【npm install 包名 --save-dev】命令將包添加到package.json文件的devDependencies字段中。

 

(6). package-lock.json文件

　鎖定包的版本，確保再次下載時不會因為包版本不同而產生問題。

　加快下載速度，因為該文件中已經記錄了項目所依賴第三方包的樹狀結構和包的下載地址，重新安裝時只需下載即可，不需要做額外的工作。

2. nrm

(1). 含義

　npm的鏡像源管理工具，有時候國外資源太慢，那么我們可以用這個來切換下載的鏡像源。 

(2). 切換npm的下載路徑到淘寶 

A. 全局下載nrm，指令為【npm install -g nrm】

B. 查看nrm的可選擇的下載源頭  【nrm ls】

　①發現報錯：

　②解決：輸入指令【set-ExecutionPolicy RemoteSigned】，然后輸入y即可，如下圖：

 　③繼續運行【nrm ls】，發現還報錯

 　④解決：找到nvm文件夾安裝位置，打開cli.js 第17行修改成

//const NRMRC = path.join(process.env.HOME, '.nrmrc'); (刪除)
const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');

 　⑤ 繼續運行【nrm ls】，運行成功

C. 切換到淘寶下載，運行指令 【nrm use taobao】 ，然后查看【nrm ls】

PS：可以不用安裝nrm，直接通過指令 【 npm config set registry https://registry.npm.taobao.org】，該指令與前面“配置npm的全局安裝路徑類似”，都是操控的 .npmrc文件

prefix=D:\Develop\npm
cache=D:\Develop\npm-cache
home=https://npm.taobao.org
registry=https://registry.npm.taobao.org/

 

三. VsCode的使用

1. 下載安裝

　直接去官網下載即可：https://code.visualstudio.com/

2. 各種插件 

(1). 漢化插件，輸入chinese搜索。

(2).  Code Runner，可以右鍵快速執行js代碼的插件

 

 (3). Svn插件

 

 安裝完需要配置和客戶端TortoiseSVN路徑關聯。

 A. 在設置中搜索SVN，然后進入到配置文件中。

 B. 配置路徑，注意是//,  重啟vscode即可

 "svn.path":"C://Program Files//TortoiseSVN//bin"

 

C. 繼續搜索TortoiseSVN，進行下載安裝。

 (4). open in brower，在瀏覽器中打開

 

 

 

 

 

 

 

 

 

!

• 作       者 : Yaopengfei(姚鵬飛)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 聲     明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
• 聲     明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。