天天看點

bower安裝入門

安裝bower前的一些準備工作

1、首先在系統下載下傳安裝node.js  

2、下載下傳安裝Git,bower從遠端git倉庫擷取代碼包。具體操作可看:Git 上傳代碼到遠端倉庫以及從遠端庫克隆

開始安裝bower

bower可以使用npm安裝,建立一個空的練習檔案夾(本次練習命名為bower),在指令行中轉到該檔案夾後執行下述指令就可以完成安裝。

1、在指令行下切換到目前目錄下輸入以下指令(本次練習采用局部安裝)如下圖:

//全局安裝

npm install -g bower

//安裝到你的項目目錄

npm install --save-dev bower

bower安裝入門

2、安裝完bower後,在指令行執行bower help,可以檢視Bower的幫助資訊,如圖:

bower安裝入門

3、初始化目前工程的bower,在指令行下執行bower init指令 會提示你輸入一些基本資訊,根據提示按回車或者空格即可,然後會生成一個bower.json檔案,用來儲存該項目的配置,如圖:

bower安裝入門

bower.json檔案

{
  "name": "bower",
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
  }
}
           

注:windows下bower初始化時不應該在git bash中,而應該在cmd下打開的dos視窗中進行。

包的安裝

1、使用bower安裝某個特定類庫,例如jquery:  在指令行執行 bower install jquery --save指令,bower就會從遠端下載下傳jquery最新版本到你的dist目錄下

bower安裝入門

其中--save參數是儲存配置到你的bower.json,你會發現bower.json檔案已經多了一行:

"dependencies": {

    "jquery": "^3.2.1"

  }

檢視包的資訊

在指令行執行bower info jquery 指令,可檢視jquery都有哪些版本,如圖:

bower安裝入門

包的更新

1、如果你想修改目前下載下傳的jquery版本,可直接在 bower.json 檔案下修改 jquery 版本号,比如想把目前版本修改jquery為1.11.3版本,如下:

 "dependencies": {

    "jquery": "~1.11.3"

  }

2、修改好後,在指令行執行 bower update 指令,bower就會為你切換jquery的版本了,如圖:

bower安裝入門
bower安裝入門

包的查找

1、比如我想安裝bootstrap的某個插件,可在指令行執行bower search bootstrap指令,bower就會列出包含字元串bootstrap的可用包了,如圖:

bower安裝入門

2、在指令行執行git clone https://########.git 指令,即可把想要的插件克隆到本地目錄下,如圖:

bower安裝入門
bower安裝入門

包的解除安裝

在指令行下執行 bower uninstall jquery指令,就看把下載下傳下來的包解除安裝,如圖:

bower安裝入門
bower安裝入門