Знание этих пакетов npm может повысить эффективность разработки в несколько раз

внешний интерфейс NPM
Знание этих пакетов 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 функций для поддержки ваших любимых повседневных вспомогательных функций: сопоставление, фильтрация, вызов — и более специализированные полезные функции: привязки функций, шаблоны javascript, создание быстрых индексов, глубокие тесты на равенство и многое другое.

официальная документация

Установить

npm install underscore

использовать

import _, { map } from 'underscore';

lodashjs

lodashjs — это согласованная, модульная, высокопроизводительная служебная библиотека JavaScript.

Lodash упрощает JavaScript, упрощая работу с массивами, числами, объектами, строками и многим другим. Модульный подход Lodash отлично подходит для:

  • Обход массива, объекта и строки
  • Управление и обнаружение значений
  • Создайте функцию, которая соответствует функции

официальная документация

Установить

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

account.js — это небольшая библиотека JavaScript для чисел, валют и парсинга/форматирования валюты. Он легкий, полностью локализуемый, не имеет зависимостей и отлично работает как на стороне клиента, так и на стороне сервера.

Установить

npm i accounting

Случай цитирования

import account from 'accounting' // 小数处理

accounting.formatMoney(12345678); // $12,345,678.00

Animate.css

Animate.css — это готовая кроссбраузерная библиотека анимации для ваших веб-проектов. Отлично подходит для акцентов, домашних страниц, слайдеров и подсказок для привлечения внимания.

официальная документация

Установить

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 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

Компонент карты Baidu на основе 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. В основном используется для построения широкоэкранных (полноэкранных) страниц отображения данных, то есть визуализации данных. Доступны различные типы компонентов:

  • Рамка

Контейнеры с разными границами

  • Украсить

Используется для украшения эффектов страницы и увеличения визуальных эффектов

  • Диаграмма

Компоненты диаграммы упакованы на основе диаграмм, легкие и простые в использовании.

  • разное

Летающая линейная диаграмма/График уровня воды/Карусель/..

официальная документация

npm install @jiaminghi/data-view

использовать

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

<dv-border-box-1>dv-border-box-1</dv-border-box-1>

axios

Axios — это HTTP-библиотека на основе обещаний, которую можно использовать в браузерах и node.js.

характеристика

  • Создание XMLHttpRequests из браузера
  • Создать http-запрос из node.js
  • Обещанная поддержка API
  • Перехват запросов и ответов
  • Преобразование данных запроса и данных ответа
  • отменить запрос
  • Автоматически преобразовывать данные JSON
  • Поддержка клиентов против XSRF

официальная документация

Установить

npm install axios

использовать

import axios from 'axios'   

axios.get('/user)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

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);
}

заключительные замечания

большое спасибокрасивый и красивыйМы можем видеть здесь, если эта статья хорошо написана или немного поможет вам,попросить лайк,Поиск внимания,умоляю поделиться

«Также приглашаем обсудить в области комментариев, официальный представитель NuggetsПроект «Звезда раскопок»После мероприятия 100 штук Наггетсов будут разыграны в области комментариев, и только у комментаторов будет возможность выиграть следующие призы, подробнее о лотерее читайте в статье о мероприятии».

Подарки от счастливых розыгрышей: значки Nuggets, тапочки, кружки, холщовые сумки и т. д., распределенные случайным образом.

Категории