第三方插件

loadjs

// execute code elsewhere when the bundle has loaded
        loadjs.ready("foobar", function () {
          // foo.js & bar.js loaded
            debugger;
        });

    //图片裁切 基于jquery
    loadjs([
        window.$loadOpen["cropper-css"].replace("{cdn}", window.$appConfig.cdn.root)
    ], "cropper-css", {
        success: function (e) {},
        error: function (e) {},
    });

vant

https://vant-contrib.gitee.io/vant/#/zh-CN/

https://vant-contrib.gitee.io/vant/#/zh-CN/

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/form

模板之家

http://www.cssmoban.com/statics/user/page/kt.html

https://cdn.rg1008.com/datav/admin/app-chat-box.html

2020年前端框架

https://www.uisdc.com/web-designers-and-developers-february-2020?share_token=C2654D2A-ED55-414F-B65D-B8E6D82DA441&tt_from=mobile_qq&utm_source=mobile_qq&utm_medium=toutiao_ios&utm_campaign=client_share

vue-element-admin

https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD

淘宝前端框架 ant design

https://store.antdv.com/pro/preview/workplace

https://github.com/vueComponent/ant-design-vue

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

字体库 fontawesome

http://www.fontawesome.com.cn/

富文本框

https://www.tiny.cloud/get-tiny/language-packages/
https://www.tiny.cloud/docs/
https://www.tiny.cloud/docs/release-notes/release-notes582/

jszip

https://www.npmjs.com/package/jszip
https://stuk.github.io/jszip/

var zip = new JSZip();
zip.file("Hello.txt", "Hello World\\n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"blob"})
.then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

图表 chartjs

npm i chart.js

https://www.chartjs.org/
https://www.chartjs.org/docs/latest/samples/bar/vertical.html
https://github.com/chartjs/Chart.js/releases

metismenu 侧边导航插件

https://mm.onokumus.com/

jvectormap 地图

https://github.com/bjornd/jvectormap

图表 chartjs

http://chartjs.cn/
http://chartjs.cn/docs/
https://github.com/chartjs/Chart.js

SignalR

https://docs.microsoft.com/zh-cn/aspnet/core/signalr/introduction?view=aspnetcore-5.0

/**
 * // 传输
// SignalR 支持以下用于按正常回退) (处理实时通信的技术：
// WebSockets
// Server-Sent 事件
// 长轮询
// SignalR 自动选择服务器和客户端功能内的最佳传输方法。
//https://docs.microsoft.com/zh-cn/aspnet/core/signalr/introduction?view=aspnetcore-5.0

// JavaScript 客户端
// JavaScript 客户端在 NodeJS 8 及更高版本以及以下浏览器上运行：
// JAVASCRIPT 客户端
// 浏览者    Version
// Apple Safari，包括 iOS    当前†
// Google Chrome，包括 Android    当前†
// Microsoft Edge    当前†
// Mozilla Firefox    当前†
// †最新指的是浏览器的最新版本。
// JavaScript 客户端不支持 Internet Explorer 和其他旧版浏览器。 客户端在不支持的浏览器上可能出现意外行为和错误。
// .NET 客户端
// .Net 客户端在 ASP.NET Core 支持的任何平台上运行。 例如， xamarin 开发人员可以使用 SignalR 使用 xamarin 8.4.0.1 和更高版本以及使用 xamarin 11.14.0.4 和更高版本的 ios 应用来构建 Android 应用程序。
// 如果服务器运行 IIS，则 Websocket 传输要求在 Windows Server 2012 或更高版本上安装 IIS 8.0 或更高版本。 所有平台都支持其他传输。
// Java 客户端
// Java 客户端支持 java 8 及更高版本。
 */

driver.js 步骤引导

github：https://github.com/kamranahmedse/driver.js
用法和用例介绍：https://kamranahmed.info/driver.js/
简单的安装使用介绍（中文，非官方）：http://f2ex.cn/driver-js/

const driver = new Driver();

// Define the steps for introduction
driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#second-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'top'
    }
  },
  {
    element: '#third-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'right'
    }
  },
]);

// Start the introduction
driver.start();

Clipboard.js实现文本复制或者剪切到剪切板

https://www.jianshu.com/p/3f8867de041e
https://clipboardjs.com/

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

codemirror 代码编辑器

https://codemirror.net/
https://github.com/codemirror/codemirror

vue-count-to 数字格式化

https://www.npmjs.com/package/vue-count-to

How to use?

npm install vue-count-to

Example

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>

<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
</script>

注意：当autoplay：true时，它将在startVal或endVal更改时自动启动