常用的npm包
Moment.js
moment 是一个支持多语言的日期处理类库
安装
npm install moment
引用案例
import moment from 'moment';
moment().format('MMMM Do YYYY, h:mm:ss a');
Day.js
Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。
安装
npm install dayjs
引用案例
import dayjs from 'dayjs';
dayjs().format()
underscorejs
Underscore 是一个 JavaScript 库，它提供了一大堆有用的函数式编程助手，而无需扩展任何内置对象。
Underscore 提供了 100 多个函数，支持您最喜欢的日常功能助手：map、filter、invoke — 以及更专业的好东西：函数绑定、javascript 模板、创建快速索引、深度相等性测试等。
安装
npm install underscore
使用
import _, { map } from 'underscore';
lodashjs
lodashjs是一个一致性、模块化、高性能的 JavaScript 实用工具库。
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数
安装
npm i lodash
引用案例
import _ from 'lodash'
var objects = [{ 'a': 1 }, { 'b': 2 }];
// 深拷贝
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
number-precision
使用javascript精确地执行加法、减法、乘法和除法运算
npm i number-precision
import NP from 'number-precision' // plus(+) minus(-) times(*) divide(/) round
NP.plus(1.111,2.222)
accounting
accounting.js是一个用于数字、货币和货币解析/格式化的小型 JavaScript 库。它是轻量级的，完全可本地化的，没有依赖关系，并且在客户端或服务器端工作得很好。
npm i accounting
引用案例
import account from 'accounting' // 小数处理
accounting.formatMoney(12345678); // $12,345,678.00
Animate.css
Animate.css是一个随时可用的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。
安装
npm install animate.css
引用使用
import 'animate.css';
<h1 class="animate__animated animate__bounce">An animated element</h1>
WOW.js
滚动时显示动画。结合Animate.css 轻松自定义动画设置：样式、延迟、长度、偏移、迭代...
使用案例
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<div class="wow bounceInUp">
Content to Reveal Here
</div>
NPM包
npm install wowjs
HTML
<section class="wow animate__wobble">11111111111111</section>
<section class="wow animate__heartBeat">2222222222222</section>
js
import "animate.css";
import { WOW } from "wowjs";
···
···
this.$nextTick(() => {
let wow = new WOW({
animateClass: "animated",
offset: 100,
callback: function(box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">");
}
});
wow.init();
});
Vue Baidu Map
基于 VUE 2.x 的百度地图组件
npm install vue-baidu-map --save
引用案例
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
<template>
<baidu-map class="bm-view">
</baidu-map>
</template>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>
dataV
组件库基于Vue ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用：
边框
带有不同边框的容器
装饰
用来点缀页面效果，增加视觉效果
图表
图表组件基于Charts封装，轻量，易用
其他
飞线图/水位图/轮播表/..
npm install @jiaminghi/data-view
使用
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
<dv-border-box-1>dv-border-box-1</dv-border-box-1>
countUp.js
CountUp.js 是一个无依赖的轻量级 JavaScript 类，可用于快速创建以更有趣的方式显示数字数据的动画。
安装
npm install countup.js
使用
import { CountUp } from 'countup.js';
let demo = new CountUp('myTargetElement', 6964);
if (!demo.error) {
demo.start();
} else {
console.error(demo.error);
}
