天天看點

vue--npm的使用

npm介紹

NPM 全稱 Node Package Manager,它是 JavaScript 的包管理工具, 并且是 Node.js 平台的預設包管理工具。通過NPM 可以安裝、共享、分發代碼,管理項目依賴關系。

  • 可從NPM伺服器下載下傳别人編寫的第三方包到本地使用。
  • 可從NPM伺服器下載下傳并安裝别人編寫的指令行程式到本地使用。
  • 可将自己編寫的包或指令行程式上傳到NPM伺服器供别人使用。

最新版本的 Node.js 已經內建了 npm 工具,是以必須首先在本機安裝 Node 環境。

Node.js 官網下載下傳位址:

  • 英文網:https://nodejs.org/en/download/
  • 中文網:http://nodejs.cn/download/

裝完成後,檢視目前 nodejs 與 npm 版本

vue--npm的使用

 npm初始化項目

npm我們已經安裝好了,現在讓我們初始化一個項目

npm init 指令初始化項目:

建立一個  npm-demo 檔案夾,通過指令提示符視窗進入到該檔案夾,執行下面指令進行初始化項目

npm init      
vue--npm的使用
  • package name: 包名,其實就是項目名稱,注意不能有大寫字母
  • version: 項目版本号
  • description: 項目描述
  • keywords: {Array}關鍵字,便于使用者搜尋到我們的項目

最後會生成 package.json 檔案,這個是包的配置檔案,相當于 maven 的 pom.xml 我們之後也可以根據需要進行修改。

{
  "name": "npm-demo",  //包名
  "version": "1.0.0",  //版本号
  "description": "test demo",  //描述
  "main": "index.js",  //程式的主入口檔案
  "scripts": {     //腳本指令組成的對象
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zouzou",  //作者
  "license": "ISC"     //許可證,預設即可      

還有一種方式,全部都采用預設的,不會提示手動輸入

npm init -y      

 npm安裝子產品

npm install 指令用于安裝某個子產品,安裝方式分為 :本地安裝(local)、全局安裝(global)兩種。

本地安裝

将js庫安裝到目前指令所執行的目錄下

npm install <module_name>[@版本号]   //版本号可選      

安裝最新版  express 子產品,它是基于Node.js 平台的 Web 開發架構,執行如下指令:

npm install express      

如果出現黃色的是警告資訊,可以忽略,請放心,你已經成功安裝了。

在該目錄下會出現一個 node_modules 檔案夾 和 package-lock.json

node_modules 檔案夾用于存放下載下傳的js庫(相當于maven的本地倉庫)

package-lock.json 是在 npm install 時候生成一份檔案。

用以記錄目前狀态下實際安裝的各個包的具體來源和版本号。

重新打開 package.json 檔案,發現剛才下載下傳的express 已經添加到依賴清單中了.

vue--npm的使用

關于子產品版本号表示方式:

  • 指定版本号:比如 3.5.2 ,隻安裝指定版本。遵循 “大版本.次要版本.小版本”的格式規定。
  • ~ 波浪号 + 指定版本号:比如 ~3.5.2 ,安裝 3.5.x 的最新版本(不低于 3.5.2),但是不安裝 3.6.x,也就是說安裝時不改變大版本号和次要版本号。
  • ^ 插入号 + 指定版本号:比如 ^3.5.2 ,安裝 3.x.x 的最新版本(不低于 3.5.2),但是不安裝 4.x.x,也就是說安裝時不改變大版本号。需要注意的是,如果大版本号為0,則插入号的行為與波浪号相同,這是因為此時處于開發階段,即使是次要版本号變動,也可能帶來 程式的不相容。
  • latest :安裝最新版本。
安裝指定版本子產品

安裝 jquery 2.2.0版本的jquery

npm install [email protected]      

全局安裝

将js庫安裝到你的全局目錄下

npm install <module_name>[@版本号]  -g    //版本号可選      

如果安裝時出現如下錯誤:

npm err! Error: connect ECONNREFUSED 127.0.0.1:8087

解決方法,執行如下指令:

npm config set proxy null      
檢視全局安裝目錄

如果你不知道你的全局目錄在哪裡,執行下面指令

npm root -g      

修改預設全局安裝目錄,使用指令 :比如我修改為  D:\npm

npm config set prefix "D:\npm"      
vue--npm的使用
 全局安裝vue
npm install vue -g      

檢視全局已安裝子產品:

npm list -g      
vue--npm的使用

 生産環境子產品安裝

--save 或 -S 參數意思是把子產品的版本資訊儲存 package.json 檔案的 dependencies 字段中(生産環境依賴)

npm install <Module Name> [--save|-S]      

安裝 vue 子產品,安裝在生産環境依賴中

npm install vue -S      

開發環境子產品安裝

--save-dev 或 -D 參數是把子產品版本資訊儲存到 package.json 檔案的 devDependencies 字段中(開發環境依賴),是以開發階段一般使用它:

npm install <Module Name> [--save-dev|-D]      

安裝 eslint 子產品,它是文法格式校驗,隻在開發環境依賴中即可

npm install eslint -D      

批量下載下傳子產品

我們從網上下載下傳某些項目後,發現隻有 package.json , 沒有 node_modules 檔案夾,這時我們需要通過指令下載下傳這些js庫。

指令提示符進入  package.json 所在目錄,執行指令:

npm install      

此時,npm 會自動下載下傳  package.json 中依賴的js庫.

檢視子產品指令

方式1:可以安裝目錄  node_modules 下的檢視包是否還存在

方式2:可以使用以下指令檢視:

npm list  // 檢視本地安裝的所有子產品
npm list <module_name>  //檢視指定子產品      

解除安裝子產品

解除安裝局部子產品

npm uninstall <Module Name>      

解除安裝全局子產品

npm uninstall -g <Module Name>      

配置淘寶鏡像加速

我們都知道使用預設的npm下載下傳包特别慢,如果使用淘寶鏡像那就很快了,是以我們可以使用淘寶鏡像來下載下傳

檢視目前使用的鏡像位址

npm get registry      

配置淘寶鏡像位址

npm config set registry https://registry.npm.taobao.org      

還原預設鏡像位址

npm config set registry https://registry.npmjs.org/