bower简明入门教程

摘要:
什么是bower:  Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍。

什么是bower:

  Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍。

  bower简明入门教程第1张

准备工作:

  1、安装 node 环境:node.js

  2、安装 Gitbower 从远程 git 仓库获取代码包:git简易指南

安装bower:

  使用 npm,打开终端,输入:

1 npm install -g bower

  其中 -g 命令表示全局安装

开始使用:

  使用 help 命令查看帮助

  bower简明入门教程第2张

自定义包的安装目录:

  首先进入项目目录下,新建文件 1.txt

  然后命令行进入项目目录下,输入命令重命名该文件为 .bowerrc

1 rename 1.txt .bowerrc

这个 .bowerrc 文件是自定义 bower 下载的代码包的目录,比如现在我的项目结构如下图:

  bower简明入门教程第3张

  那我的 .bowerrc 文件内容如下:

1 {
2   "directory" : "js/lib"
3 }

bower初始化:

  命令行进入项目目录中,输入命令如下:

1 bower init

  会提示你输入一些基本信息,根据提示按回车或者空格即可,然后会生成一个bower.json文件,用来保存该项目的配置,如下:

1 {
2   "name": "myWeb",
3   "authors": [
4     "adou <doufu_0329@163.com>"
5 ],
6   "description": "",
7   "main": "",
8   "license": "MIT",
9   "homepage": "",
10   "private": true,
11   "ignore": [
12     "**/.*",
13     "node_modules",
14     "bower_components",
15     "wwwroot/lib",
16     "test",
17     "tests"
18 ],
19   "dependencies": {
20     
21 }
22 }

包的安装:

  下面终于开始安装需要的包了!
  比如我要安装一个jquery,输入如下命令:

1 bower install jquery --save

  或者根据版本进行安装,输入如下命令:

1 bower install jquery#1.0.0 --save

  然后bower就会从远程下载jquery最新版本到你的js/lib目录下
  其中--save参数是保存配置到你的bower.json,你会发现bower.json文件已经多了一行:

1  "dependencies": {
2     "jquery": "~2.1.4"
3   }

  

包的信息:

  比如我们想要查找jquery都有哪些个版本,输入如下命令:

1 bower info jquery

  会看到jquerybower.json的信息,和可用的版本信息

  可以看到jquery最新的兼容版版本为1.11.3

包的更新:

  上面安装的是最新版的高版本jquery,假如想要兼容低版本浏览器的呢?
  已经查到兼容低版本浏览器的jquery版本为1.11.3,下面直接修改bower.json文件中的jquery版本号如下:

1   "dependencies": {
2     "jquery": "~1.11.3"
3   }

  然后执行如下命令:

1 bower update

  bower就会为你切换jquery的版本了

包的查找:

  还有一个很重要的功能,就是包的查找,比如我想要安装bootstrap的某个插件,但是记不住名字了,就可以直接在命令行输入:

1 bower search bootstrap

  bower就会列出包含字符串bootstrap的可用包了

包的卸载:

  卸载包可以使用 uninstall 命令:

1 bower uninstall jquery

=========

免责声明:文章转载自《bower简明入门教程》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇OnPaint和OnDraw的区别PL/pgSQL学习笔记之四下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】 第 3 章 用 JavaScript 实现的照片展示 构建软件设计的方法有两种:一种是把软件做得很简单以至于明显找不到缺陷;另一种是把它 做得很复杂以至于找不到明显的缺陷。 ——C.A.R...

jQuery Validate插件实现表单强大的验证功能

转自:http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。 第一节:jQuery Validation让验证变得如此容易 一、...

jquery和js的几种页面加载函数的方法以及执行顺序

参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html        https://www.cnblogs.com/james641/p/7838373.html 执行顺序:A>B>C>D>E $(function() { alert("A"); }); $(doc...

jQuery-为动态添加的元素绑定事件

样例: $("#modify_nick").click(function () {$(this).css("display","none");$("#nickname_span").empty();var input = document.createElement("input");$(input).attr("type", "text");$(inpu...

jquery----语法扩展(导入js文件)

简单使用 第一步,新建js文件 第二步,在js文件中添加 $.extend({ "GDP": function () { console.log("哈哈哈哈"); } }); 第三步,在html中使用   $.GDP()  即可 复杂(1,希望一些函数不可以被外部引用,不可以被修改$) (functi...

jquery queryBuilder过滤插件的使用

1.此插件用于过滤搜索的功能,功能强大,可实现复杂条件过滤,单选多选的等条件的过滤。还可以在插件中调用其他插件。   下载地址和文档阅读:http://querybuilder.js.org/   效果图: 2.全英文文档,感觉学起来有丢丢的困难== 需要引入的文件 <link rel="stylesheet" href="http://t.zo...