vue.js學習筆記(一)

目錄

 

第一章:npm包管理工具

1.1 什麼是npm

1.2 npm 初始化項目

1.3 通過npm安裝模塊

1.3.1 安裝方式

1.3.2 生產/開發環境模塊安裝

1.4 批量下載模塊

1.5 查看模塊命令


第一章:npm包管理工具

1.1 什麼是npm

npm(node package manager):javaScript包管理工具,並且是node.js平臺的默認包管理工具,通過npm可以安裝,共享,分發代碼,管理項目的依賴關係。-----可以說npm相當於前端的maven

最新版本的node.js已經集成了npm工具,所以必須在本機安裝node.js環境(官網下載)

檢查是否安裝成功,win+r  cmd 輸入下面的命令,顯示版本號,說明安裝成功了

node -v 
npm -v

1.2 npm 初始化項目

npm init 命令初始化項目

1)創建一個npm-demo文件夾,通過命令提示窗口進入到當前文件,執行 npm init 初始化項目

2)初始化之後,會在上面提示的E:\h5\npm-demo\package.json中寫入,這些初始化信息

3)如果,這些初始化信息,你都使用默認的,那就可以直接使用命令 npm init -y  就可以跳過設置的部分,直接初始化完成

 

1.3 通過npm安裝模塊

1.3.1 安裝方式

npm install 命令用於安裝某個模塊,安裝方式分爲:本地安裝(local),全局安裝(global)兩種。

1)本地安裝

將js庫安裝到當前執行命令時所在的目錄(注:指定版本號,必須是該模塊存在的)

npm install <module name模塊名稱>[@版本號]

例如:安裝express(基於node.js平臺的web開發框架),執行如下命令

npm install express  這裏沒有指定版本號

所安裝模塊的相關依賴也會一併下載下來,所以會看到(如下圖),除了我們下載的模塊以外,還有很多其他的模塊

安裝之後,在項目目錄下,會多出一個package-lock.json,其實就是列出了當前下載的模塊的具體的版本以及鏡像來源,這邊是從淘寶下載的(需要配置,在後續會有講解,如何配置)

打開項目目錄下的package.json文件(如下),會多出一個dependencies(指的是你已經安裝過的模塊),可以看到,版本號前面多了一個^,(繼續往下看)

關於模塊版本號表示方式:

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

2)全局安裝

將js庫安裝到全局目錄(一般,通用模塊下載到全局目錄下面)

npm install <module name模塊名稱>[@版本號] -g

查看電腦的全局目錄(默認在C盤)

npm root -g

考慮到C盤容量,可以更改全局目錄的路勁

npm config set prefix "指定目錄"
例如:

npm config set prefix "e:\npm"

注:遷移之後,在該目錄下,會看不到npm這個文件夾,但是再執行npm root -g 就可以看到e下面有npm這個文件夾了。

具體安裝方式,以及文件夾說明,同本地安裝,區別就是命令不一樣。

3)如果在安裝時出現如下錯誤

npm err! Error: connect EconnREFUSED 127.0.0.1:8087

解決方法:執行如下命令,再重新執行安裝命令即可(配置設置代理爲空)

npm config set proxy null

4)查看全局安裝的模塊

npm list -g
或
npm ls -g

1.3.2 生產/開發環境模塊安裝

  • 生產:  --save 或 -S(s大寫) 參數意思是把模塊版本信息保存到 package.json 文件的dependencies 字段中(生產環境依賴)

       沒有寫--save或-s  默認也是安裝到生產環境

npm install <模塊名稱> [--save|-S]

  • 開發:--save-dev 或 -D 參數意思是把模塊版本信息保存到 package.json 文件的devDependencies 字段中(開發環境依賴)

npm install <模塊名稱> [--save-dev|-D]

例如:安裝eslint 模塊(語法校驗模塊),在開發環境即可。(注意要在項目目錄下去安裝)

npm install eslint -D

1.4 批量下載模塊

別人提供的項目,一般不會有node_modules這個文件夾,只有package.json。只能通過這個文件去下載需要的依賴。例如:

1)打開命令窗口,到這個項目下,執行  npm install,就會根據pacjage.json去下載(下載時長根據需要下載的依賴多少會有變化)

2)npm ls 或者 npm list 查看本地當前已經下載的模塊

1.5 查看模塊命令

1)查看本地已經安裝的模塊方式

  • 直接在安裝目錄node_modules查看
  • 執行下面命令
npm ls
或
npm list
或查看指定模塊
npm list <模塊名稱>

2)查看模塊遠程最新版本

npm view <模塊名稱> version

例:
npm view jquery version

3)查看遠程模塊所有版本

npm view <模塊名稱> versions

例:
npm view jquery versions

4)卸載模塊

卸載局部模塊(在項目目錄下)
npm uninstall <模塊名稱>

卸載全局模塊(隨意路勁)
npm uninstall -g <模塊名稱>

5)配置淘寶鏡像加速

  • 查看當前鏡像地址
npm get registry

  • 配置淘寶鏡像地址
npm config set registry https//registry.npm.taobao.org

  • 還原默認鏡像地址
npm config set registry https//registry.npmnpmjs.org/

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章