npm 包 bauer-web-libs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

bauer-web-libs 是一个 npm 包, 它是一个 Web 开发人员工具库, 包含了常见的一些前端依赖库及样式库的引用, 以方便开发人员快速引用, 减少配置工作的时间.

安装

使用 npm 进行安装:

npm install bauer-web-libs --save-dev

引用

在 HTML 文件中引入相关的样式表和脚本:

<head>
  <link rel="stylesheet" href="./node_modules/bauer-web-libs/bauer-web-libs.min.css">
  <script src="./node_modules/bauer-web-libs/bauer-web-libs.min.js"></script>
</head>

也可以选择只引入需要的文件:

<head>
  <link rel="stylesheet" href="./node_modules/bauer-web-libs/css/normalize.min.css">
  <link rel="stylesheet" href="./node_modules/bauer-web-libs/css/fontawesome.min.css">
  <link rel="stylesheet" href="./node_modules/bauer-web-libs/css/animate.min.css">
  <script src="./node_modules/bauer-web-libs/js/jquery.min.js"></script>
  <script src="./node_modules/bauer-web-libs/js/vue.min.js"></script>
</head>

内容

bauer-web-libs 包含了常见的前端依赖库, 如 jQuery, Vue 等, 以及常见的 CSS 样式库, 如 normalize.css, fontawesome 等. 下面对其中的一些库进行介绍:

jQuery

jQuery 是一个快速、简洁的 JavaScript 库，极大地简化了 HTML 文档的遍历、事件处理、动画等操作. 通过引入 jQuery, 可以快速操作 DOM, 在网页开发中非常实用.

在引入 bauer-web-libs 时, 已经将 jQuery 引入其中, 直接使用即可.

$(document).ready(function(){
  // do something
});

Vue

Vue 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层, 它非常容易上手, 也能够轻量高效地开发复杂的单页面应用.

在引入 bauer-web-libs 时, 已经将 Vue 引入其中, 直接使用即可.

-- -------------------- ---- -------
---- ---------
  -- ------- --
------

--------
--- --- - --- -----
  --- -------
  ----- -
    -------- ------ -----
  -
--
---------

normalize.css

normalize.css 是一种现代的、HTML5 标准化的替代样式表, 能够统一不同浏览器之间的显示效果, 减少开发中的浏览器兼容问题. 引入该样式表可以避免许多重复的 CSS 样式编写.

<head>
  <link rel="stylesheet" href="./node_modules/bauer-web-libs/css/normalize.min.css">
</head>

fontawesome

fontawesome 是一个轻松使用矢量图标来制作各种 UI 元素的图标字体库. 它提供了丰富的图标库供选择, 并提供了方便的 CSS 样式调用方式.

<i class="fas fa-question"></i>

具体的图标使用可以到 fontawesome 的官网查看.

总结

引入 bauer-web-libs 可以方便地使用多个库, 并减少配置时间. 该库包含了常见的前端依赖库与样式库, 并且使用方便简单. 在开发项目时, 引入 bauer-web-libs 可以提高开发效率, 减少对库的依赖管理工作.

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600555ee81e8991b448d2f79