bower安装和使用

字数745 阅读10127 评论2 喜欢3

bower的安装

1,首先在我的系统 安装 nodejs。因为我的系统是windows,还需要安装msysgit,注意图二中的选项

msysgit

Git setup

2,之后就可以用npm包管理工具下载并全局安装bower:

>npm install -g bower

全局安装bower 后,可以查看Bower的帮助信息,使用命令:

>bower help

3, 初始化当前工程的bower,此操作会在当前目录下生成bower.json文件:

>bower init


bower的使用

使用了bower的项目都会在目录下有一个bower.json文件。在该文件同级目录下,使用如下命令即可安装相关依赖库。

>bower install

注:bower下载安装依赖库实际上是使用git进行下载。对于linux系统,由于默认都有安装git,所以一般没问题。但是windows系统一般没有git。在windows系统下需要确定安装了git客户端,建议使用同捆的git bash命令行来执行bower install命令。或者把git目录加入windows的环境变量中,再在命令行中执行bower install命令。()


使用bower安装某个特定类库,例如jquery:

> bower install jquery


使用bower更新某个特定类库,例如jquery:

>bower update jquery


删除包,例如jquery (如果包已经被依赖,则不能删除)

>bower uninstall jquery


试着在项目文件夹下,下载jquery 和 underscore

bower install jquery underscore

然后就可以看到项目文件夹下多了bower_components(默认目录),再就是两个插件包了

bower_components

初步这样也就行了,但是/bower_components这个目录有点让人不习惯,我想把东西下载到我习惯的目录里。需要加一个.bowerrc文件。注意,不需要名字什么的,只要新增一个.bowerrc就行了。

提示:用cmd命令创建文件如下

cmd创建文件

.bowerrrc

里面可以定义下载目录:

{

"directory": "app/vendor"

}

.bowerrc 配置

关于.bowerrc更多配置,请参考
https://github.com/bower/spec/blob/master/config.md

同样的cmd命令再执行一遍,这次可以看到文件下载到app/vendor中了。

下载到指定目录

由于在实际安装过程中,没有运行命令 >bower init 现在重新运行该命令 生成bower.json

遇到了问题

bower init 失败

解决办法:在 windows cmd 里面使用 bower init,而不是在 git bash 里面使用 bower init.

init 设置

使用bower install jquery --save才会把jquery依赖记入到bower.json。
要安装某个版本使用#,如安装juqery1.9.1,可以使用bower install jquery#1.9.1。
除了用包名安装,也可以指定git地址,进行安装,如bower install https://github.com/jquery/jquery。


bower install --save handlebars 后就会看到handlebar 在bower.json的dependencies里,如果不加--save就不会有。

handlebars

接下来删了app/vendor下的所有内容,然后bower install,他会把bower.json中的dependencies重新下载。

[入门]bower安装和使用的更多相关文章

  1. bower安装使用入门详情

    bower安装使用入门详情   bower自定义安装:安装bower需要先安装node,npm,git全局安装bower,命令:npm install -g bower进入项目目录下,新建文件1.tx ...

  2. Yeoman入门之安装及环境配置

    Yeoman入门之安装及环境配置 http://blog.csdn.net/panlingfan/article/details/27345037 http://www.nodejs.orgYEOMA ...

  3. Less入门与安装(转)

    快速入门 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览 ...

  4. Bower安装Bootstrap

    1.Bower简介 官网:https://bower.io/ Bower can manage components that contain HTML, CSS, JavaScript, fonts ...

  5. ES 入门之一 安装ElasticSearcha

    安装ElasticSearcha 学习ES也有快一个月了,但是学习的时候一直没有总结.以前没有总结是因为感觉不会的很多,现在对ES有一点了解了.索性就从头从安装到使用ES做一个详细的总结,也分享给其他 ...

  6. Maven的安装、配置及使用入门+maven安装报错:JAVA_HOME【申明:来源于网络】

    Maven的安装.配置及使用入门+maven安装报错:JAVA_HOME[申明:来源于网络] Maven的安装.配置及使用入门:http://www.cnblogs.com/dcba1112/arch ...

  7. Redis入门 -- Redis安装与配置

    Redis入门 -- Redis安装与配置 Redis的安装 Redis的安装,我这里使用的是虚拟机. 为了让主机和虚拟机之间可以顺利通信,按照以下步骤进行: 1. 将网络连接模式改为桥接 2. re ...

  8. bower安装和使用

    bower的安装 1,首先在我的系统 安装 nodejs.因为我的系统是windows,还需要安装msysgit,注意图二中的选项   msysgit   Git setup 2,之后就可以用npm包 ...

  9. FastAdmin 如何用 composer bower 安装

    FastAdmin 如何安装 composer bower 众所周知的原因,compower bower 安装并不怎么稳定. 刚开始安装时还有侥幸,用软件安装里的设置端口代理,composer 倒是可 ...

随机推荐

  1. theano + gpu

    Teano安装测试 1. Anaconda 安装 Anaconda是一个科学计算环境,自带的包管理器conda很强大.之所以选择它是因为它内置了python,以及numpy.scipy两个必要库和一些 ...

  2. js的常用api

    JavaScript常用API总结 原创 2016-10-02 story JavaScript 下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属 ...

  3. Python学习推荐

    1.    Python官网 官网想必是最权威的,不仅有Python 2.X和3.X的软件包,还有官方文档Python tutorial (official docs)及社区. 2.    在线阅读免 ...

  4. app——分享wap站,数据处理页面展示

    无意中接到了一个小的工作任务:配合手机app端的分享功能做一个wap站,简言之:将手机app端分享的文章id传过来,利用此id再进行一系列的操作,由于文章分为纯文本,图文以及图集的三种类型的文章,因此 ...

  5. android代码嵌入html代码

    有时候需要在一个TextView控件中设置两种不同颜色的字体,这时候可以使用Html.fromHtml方法实现 例如: tvTaskDesc.setText(Html.fromHtml("当 ...

  6. iOS开发UI篇—程序启动原理和UIApplication

    iOS开发UI篇—程序启动原理和UIApplication   一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就 ...

  7. Python排序算法

    不觉已经有半年没写了,时间真是容易荒废,这半年过了个春节,去拉萨旅行.本职工作也很忙,没有开展系统的学习和总结. 今年开始静下心来从基础开始学习,主要分为三部分,算法.线性代数.概率统计. 首先学习算 ...

  8. GSM模块fibocom G510使用记录

    一、背景:最近在做一个单定位的产品,对低功耗要求较高,选用了G510系列的模块。现在仅做了三块样板,先熟悉下。 二、优点:1.功耗低,和西门子的BGS2差不多;2.注册网络指令简单;3.其他有待发现 ...

  9. 关于HTTP的几种

    301.404.200.304等HTTP状态,代表什么意思? 如果某项请求发送到您的服务器要求显示您网站上的某个网页(例如,用户通过浏览器访问您的网页或 Googlebot 抓取网页时),服务器将会返 ...

  10. easyui datagrid

    function initData(){ //数据列表 yftjsy=$("#yftjsy").datagrid({ url: '', fit:true, showFooter:f ...