本文作者:心月

windows系統安裝npm的教程方法

心月IT博客 2019-06-11
摘要:npm全稱為Node Package Manager,是一個基于Node js的包管理器,也是整個Node js社區最流行、支持的第三方模塊最多的包管理器。npm的初衷:JavaScript開發人員更容易分享和重用代碼。npm的使用場景:允許用戶獲取第三方包并使用;允許用戶將自己編寫的包或命令行程序進行發布分享。

一、使用之前,我們先來掌握3個東西是用來干什么的。

    npm: Nodejs下的包管理器。

    webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發布的靜態資源做相應的準備,比如資源的合并和打包。

    vue-cli: 用戶生成Vue工程模板。(幫你快速開始一個vue的項目,也就是給你一套vue的結構,包含基礎的依賴庫,只需要 npm install就可以安裝)

開始:


 

    安裝nodes.js

    安裝node.js時會連同npm、vue一起安裝。

    可以在其官網下載node.js(https://nodejs.org/zh-cn/)推薦下載LTS版,下載下來的是一個mis安裝包,直接雙擊運行即可,

    選擇安裝路徑,安裝時最好不要安裝在系統盤:

安裝路徑選擇

    安裝設置,如果沒有選擇Add to path,安裝好后還要把node.js的安裝路徑添加到系統環境變量,當然也可以直接默認下一步,我們可以在安裝完后自己去添加系統環境變量:

安裝設置


    安裝完成之后,node.js安裝路徑下的目錄結構如下圖所示:

node.js目錄結構


    win+r打開CMD,檢查node安裝是否正常

node版本檢查

通常通過node安裝時安裝的npm、vue不是最新版本,在使用時可能會有一些限制,因此需要更新npm、vue,這兩項的更新我們放到后面。



    node配置修改 

    進入到node的安裝目錄下,npm的本地倉庫跑在系統盤c盤的用戶目錄了(沒見到npm-cache是因為沒有用過,一使用緩存目錄就生成了),我們試圖把這2個目錄移動回到D:\nodejs

 

    然后運行以下2條命令

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

如上圖,我們再來關注一下npm的本地倉庫,輸入命令npm list -global



下載鏡像站配置:

    使用默認的鏡像下載會很慢,可以使用淘寶的鏡像下載

    輸入命令

npm config set registry=http://registry.npm.taobao.org

配置參數查看


輸入命令npm config list 顯示所有配置信息,我們關注一個配置文件。

C:\Users\Administrator\.npmrc(如果使用的不是Administrator賬戶,這個路徑應該不是這個,而是 C:\Users\當前電腦登錄用戶名\.npmrc)。

使用文本編輯器編輯它,可以看到剛才的配置信息


檢查一下鏡像站行不行命令1

npm config get registry

檢查配置的鏡像站是否可用


npm升級更新

通過npm更新升級檢查鏡像站是否可用:

npm install npm -g

升級npm

 

注意,此時,默認的模塊D:\nodejs\node_modules 目錄

將會改變為D:\nodejs\node_global\node_modules 目錄,

如果直接運行npm install等命令會報錯的。

我們需要做1件事情:

1、增加環境變量NODE_PATH 內容是:D:\nodejs\node_global\node_modules

 

 

 

(注意,一下操作需要重新打開CMD讓上面的環境變量生效)


vue升級更新:

vue環境變量添加

 

 

編輯環境編輯path

對path環境變量添加D:\nodejs\node_global

win10以下版本的,橫向顯示PATH的,注意添加到最后時,不要有分號【;】


然后更新vue,執行命令:

npm install -g @vue/cli

或者我們可以通過創建vue工程項目來檢查vue是否可用,切換到根目錄,執行如下操作

vue create project-name

如果vue的版本太低,create會失敗,在最后會有建議操作,根據建議命令操作就可以更新vue了,不過這個只適合較低版本的vue,如果vue不是最新版本,但create仍然可用的話就不會有錯誤提示和建議操作。


npm到這里就算安裝完成了,接下來就可以使用vue來創建工程項目了。

文章版權及轉載聲明:

作者:心月 本文地址:http://www.eojird.tw/webfe/276.html發布于 2019-07-01
文章轉載或復制請以超鏈接形式并注明出處心月IT博客

分享到:
贊(

發表評論

快捷輸入:

    評論列表 (有 0 條評論,人圍觀)參與討論