前端开发中那些很好用的小工具

Lmuy
1,613 阅读3分钟

本文总结了几个本人在前端开发中用到的几个小插件或者工具网站，拿出来分享给大家，希望同样可以帮助到你们。 1.简单好用的在线接口 MOCK 平台

大家在日常工作开发中，大部分应该都是前后端分离并行开发，如果没有时间写mock或者自己写小项目懒得写mock，那这个网站可以很好的帮助你实现一个在线接口不用自己引入mock.js。
image.png

创建好项目之后，就可以编写自己需要用到的接口，还有mock数据，使用起来非常简单方便。 image.png

2.vscode中background插件

这个插件可以帮助你在vscode编辑器中自定义一个背景图片，并对背景图片进行自定义设置，下面附上我的背景图片及主要配置。

"background.useDefault": false,
"background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "width": "100%",
    "height": "100%",
    "background-position": "0% 0%",
    "background-repeat": "no-repeat",
    "background-size": "cover",
    "opacity": 0.1
},
"background.customImages": [
    "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d21f362c0f064dadb2ed8de197a328ad~tplv-k3u1fbpfcp-zoom-1.image"
]

pic.netbian.com/uploads/all… image.png

编辑器显示效果如下，是不是给你写代码提供了非常大的动力~ image.png

3.截图工具

Snipaste平时开发截图很方便

4.数字滚动效果

github.com/inorganik/c…

// 安装
npm i countup.js
// 使用
import { CountUp } from './js/countUp.min.js';
window.onload = function() {
  var countUp = new CountUp('target', 2000);
  countUp.start();
}

5.vue项目实现拖动功能

github.com/SortableJS/…

// 安装
npm i -S vuedraggable
// 使用
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

6.react项目解析Markdown文件

github.com/remarkjs/re…

// 安装
npm install react-markdown
// 使用
<ReactMarkdown source={markdown} escapeHtml={false} />

7.react项目Markdown文件导航

github.com/parksben/ma…

// 安装
npm install --save markdown-navbar
// 使用
import MarkNav from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';
<MarkNav
  className="article-menu"
  source={markdown}
  ordered={false}
/>

8.vue项目可视化

自定义程度较低可以使用v-charts: v-charts.js.org/#/
自定义程序中等可以使用echarts: echarts.apache.org/zh/index.ht… 或者 viser-vue
自定义程度较高可以使用zoomcharts: zoomcharts.com/en/ 或者 AntV: antv.vision/zh

9.不同操作系统绑定快捷键事件

// 安装
npm i -S mousetrap
// 使用
Mousetrap.bind(['command+k', 'ctrl+k'], function() {
    console.log('command k or control k');

    // return false to prevent default browser behavior
    // and stop event from bubbling
    return false;
});

10.时间格式转换（也可以用dayjs体积比momentjs要小）

// 安装
npm install moment --save
// 使用
moment().format('MMMM Do YYYY, h:mm:ss a')

11.对数据进行复杂操作

www.lodashjs.com/

// 安装
npm install --save lodash

12.vue项目在线展示pdf文件

npm install vue-pdf --save

13.打字效果

vue-typed-js

14.在你的网页图标上使用角标、图片或视频

favico.js

15.动画效果Animate.css

animate.style/

// 安装
npm install animate.css --save

import 'animate.css'

<h1 class="animate__animated animate__bounce">An animated element</h1>

16.svg路径动画mo.js

mojs.github.io/

17.字节跳动开源的富文本插件

ByteMD

18.html转markdown

Turndown

19.富文本编辑器推荐

tinymce

20.yaml格式化校验

github.com/rasshofer/y…

21.远程加载组件

remote-component

22.播放pcm

www.jianshu.com/p/0eafcbfb7…

23.播放声音

  1. APlayer: github.com/DIYgod/APla…
  2. howler: github.com/goldfire/ho…

24.前端处理多文件下载为压缩包

1.jszip:github.com/Stuk/jszip
2.file-saver:github.com/eligrey/Fil…
参考1

25.步骤引导动画

driver.js 好啦，本次分享就到这里，后续有好玩儿和好用的会持续更新本文章。

avatar
文章
阅读
粉丝