什么是bower:

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

  

准备工作:

  1、安装 node 环境:node.js

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

安装bower:

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

 npm install -g bower

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

开始使用:

  使用 help 命令查看帮助

  

自定义包的安装目录:

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

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

 rename 1.txt .bowerrc

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

  

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

 {
"directory" : "js/lib"
}

bower初始化:

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

 bower init

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

 {
"name": "myWeb",
"authors": [
"adou <doufu_0329@163.com>"
],
"description": "",
"main": "",
"license": "MIT",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"wwwroot/lib",
"test",
"tests"
],
"dependencies": { }
}

包的安装:

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

 bower install jquery --save

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

 bower install jquery#1.0.0 --save

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

  "dependencies": {
"jquery": "~2.1.4"
}

  

包的信息:

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

 bower info jquery

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

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

包的更新:

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

   "dependencies": {
"jquery": "~1.11.3"
}

  然后执行如下命令:

 bower update

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

包的查找:

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

 bower search bootstrap

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

包的卸载:

  卸载包可以使用 uninstall 命令:

 bower uninstall jquery

=========

bower简明入门教程的更多相关文章

  1. OsharpNS轻量级.net core快速开发框架简明入门教程-Osharp.Redis使用

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  2. OsharpNS轻量级.net core快速开发框架简明入门教程-从零开始启动Osharp

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  3. OsharpNS轻量级.net core快速开发框架简明入门教程-代码生成器的使用

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  4. OsharpNS轻量级.net core快速开发框架简明入门教程-基于Osharp实现自己的业务功能

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  5. OsharpNS轻量级.net core快速开发框架简明入门教程-Osharp.Hangfire使用

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  6. OsharpNS轻量级.net core快速开发框架简明入门教程-Osharp.Permissions使用

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  7. OsharpNS轻量级.net core快速开发框架简明入门教程-切换数据库(从SqlServer改为MySql)

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  8. OsharpNS轻量级.net core快速开发框架简明入门教程-多上下文配置(多个数据库的使用)

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  9. Shader 简明入门教程

    Unity3D的所有渲染工作都离不开着色器(Shader),如果你和我一样最近开始对Shader编程比较感兴趣的话,可能你和我有着同样的困惑:如何开始?Unity3D提供了一些Shader的手册和文档 ...

随机推荐

  1. ssh 使用技巧

    参考:https://deepzz.com/post/how-to-setup-ssh-config.html SSH Config 那些你所知道和不知道的事 预览目录 配置项说明 相关技巧 管理多组 ...

  2. 使用 webpack 搭建多入口项目

    闲来无事,学习一下怎么用 webpack 自定义多入口项目的打包 项目github地址:https://github.com/xiaoliwang2016/webpack-demo 先来看一下目录结构 ...

  3. Python conda安装 并安装Tensorflow

    Python conda安装 1: 官网下载3版本 Anaconda2-2018.12-Windows-x86_64.exe, 安装完后配置环境变量 用户变量->PATH 编辑新增路径 C:\P ...

  4. CAtia_打开提示:许可证过期怎么办

    CAtia_许可证过期怎么办:进计算机管理,点开服务和应用程序,点服务,找到DS License Server,在启动此服务的地方点启动,从而开启DS License Server.

  5. [Docker] 容器持久化数据的首选机制 Volume

    Volume 是 docker 容器生成持久化数据的首选机制.bind mounts 依赖主机机器的目录机构,volume 完全由 docker 管理.volume 较 bind mounts 有几个 ...

  6. nginx入门之编译安装

    nginx是什么 nginx是一个开源的,支持高性能,高并发的www服务和代理服务软件.它是一个俄罗斯人lgor sysoev开发的,作者将源代码开源出来供全球使用. nginx比它大哥apache性 ...

  7. linux下的dhcp服务器实现

    一.得到udhcpd(udhcp服务端): 1.解压busybox 2.配置busybox Networking Utilities——> [*] udhcp server(udhcpd) [* ...

  8. jQuery判断鼠标滚动方向

    var scrolltop = new Array(); var index = 0; scrolltop[0] = 0; $(document).scroll(function(){ index + ...

  9. PHP 构造方法 __construct()和PHP 析构方法 __destruct()

    PHP 构造方法 __construct() 允许在实例化一个类之前先执行构造方法. 构造方法 构造方法是类中的一个特殊方法.当使用 new 操作符创建一个类的实例时,构造方法将会自动调用,其名称必须 ...

  10. Nancy.Net之旅-初次见面

    Welcome Nancy   首先,欢迎来到Nancy!我们的主要灵感是Ruby的Sinatra框架,因此Nancy以Frank Sinatra的女儿名字命名.许多人想知道NancyFx中的Fx是什 ...