1. 程式人生 > >Bower——客戶端技術的軟件管理器

Bower——客戶端技術的軟件管理器

學習 tps animate idt git bash 輸入 下載 lis 標簽

學習參考原文:https://segmentfault.com/a/1190000000349555

1.  安裝

  (1)安裝node.js和npm

  (2)安裝bower:$ npm install -g bower(-g:全局安裝)

技術分享

2.  查看命令:bower help

技術分享

3.  bower 初始化,項目文件夾下執行:bower init ,輸入相關的項目信息,生成bower.json文件,用來保存該項目的配置信息。

技術分享

  執行完畢項目文件下會生成一個bower.json文件,如下圖所示。(註意:在Git Bash 下執行bower init會報錯,在windown cmd下面使用不會。?)

技術分享

4.  包的安裝:bower install jquery --save (--save是為了保存配置到bower.json文件中,如果不加該參數,bower.json中就沒有相關的jquery版本安裝信息。),執行該語句,bower就會從遠程下載jquery最新版本到bower_components中。

技術分享

技術分享

技術分享

4.  包的使用,在項目文件下新建index.html文件,內容如下:

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <title>Learning Bower</title>
5 </head> 6 <body> 7 8 <button>Animate Me!!</button> 9 <div style="background:red;height:100px;width:100px;position:absolute;"> 10 </div> 11 12 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 13 <script type="text/javascript"
> 14 15 $(document).ready(function(){ 16 $("button").click(function(){ 17 $("div").animate({left:250px}); 18 }); 19 }); 20 </script> 21 </body> 22 </html>

  註意:在script標簽中引用了下載的jquery文件,可以正常使用。

5.  查看包的信息:bower info jquery (可以看到jquery的bower.json)

技術分享

6.  包的版本的更改:可以直接更改bower.json文件中相應的包的版本號。然後執行:bower update——會切換到更改的jquery版本。

7.  包查詢:eg: bower search bootstrap

8.  包卸載:eg:bower uninstall jquery

9.  查詢所有安裝在應用程序中的包:bower list

10.  查詢單個包的信息:eg:bower info jquery#1.12.4

Bower——客戶端技術的軟件管理器