萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> 綜合 >> 如何熟悉bower的入門技巧

如何熟悉bower的入門技巧

 

 

使用bower可以節約去git或是網上找js的時間。如此簡便的方法,現在就跟大家一起分享吧!
 

 工具/原料


node


msysgit

 

 方法/步驟

 

1、對於windows用戶,需要裝msysgit,注意git界面中【download]和【Contnbute]的兩個選項。如下圖所示

如何熟悉bower的入門技巧

如何熟悉bower的入門技巧

 

2、以管理員身份進行安裝【bowernpm install -g bower】,試著在項目文件夾下,下載【jquery】、【 underscore】和【bower install jquery underscore】

如何熟悉bower的入門技巧

如何熟悉bower的入門技巧

 

 


3、當下載完畢後,在打開文件夾會看到多了一個【app】文件,裡面有【bower_components】,再打開就

會看到兩個插件了。如下圖所示

如何熟悉bower的入門技巧

 

 


4、【app/bower_components】這個目錄有點讓人不習慣,如果想把這個文件移動到自己習慣的目錄裡。就需要一個【.bowerrc】文件。只

要在自己習慣的文件夾中增加【.bowerrc】就行了。裡面可以自定義下載目錄【directory": "app/vendor】。如下圖所示

如何熟悉bower的入門技巧

 

 


5、同樣的【cmd】命令再操作一次,完成後就可看到文件下載到【app/vendor】中了。如下圖所示

如何熟悉bower的入門技巧

 

 


6、如果已經下載了很多必要js,又不小心將【vendor】又給刪除,或是另一個項目也需類似配置,還需再加【bower.json】配置文件,這時可以用文本編輯器新增一個,也可以用【bower.init】,初始化【bower.init】後,它的提示問題會很多,這時你只需默認就行了。如下圖所示

如何熟悉bower的入門技巧

 


7、當打開文件夾時會看到文件夾中多了一個【bower.json】文件。如下圖所示

如何熟悉bower的入門技巧

 

 


8、打開【bower install --save handlebars 】文件後就會看到【handlebars 】在【bower.json】子項

【dependencies】裡,如果不加【--save】就不會有【handlebars 】的出現。如下圖所示

如何熟悉bower的入門技巧
 

 

9、接下將【app/vendor】裡面的內容全部刪除,然後點擊【bower install】選項,這時會把【bower.json】中的

【dependencies】重新再下載。如下圖所示

如何熟悉bower的入門技巧

如何熟悉bower的入門技巧.
copyright © 萬盛學電腦網 all rights reserved