本文记录了实际开发过程中使用的前端通用、Vue、Reactnpm工具，供大家参考和自己参考。Network1.axiosAxios是一个基于promise的HTTP库，可以在浏览器和node.js中使用。npm$npminstallaxios--save参考文档http://www.axios-js.com/docs/...衍生自vue-axiosreact-axiosnuxtjs-axios2.fetchfetch基于Promise，核心在于抽象HTTP接口，包括Request、Response、Headers、Body和用于初始化异步请求的全局获取。Fetch属于原生js，提供了很多和XMLHttpRequest相同的功能，相当于XMLHttpRequest，是XMLHttpRequest的替代品。参考文档https://developer.mozilla.org...3.umi-request网络请求库，基于fetch封装，兼有fetch和axios的特点，旨在为开发者提供统一的API调用方式，简化use，提供缓存、超时、字符编码处理、错误处理等常用功能，目前主要使用。npm$npminstallumi-request--save4.reqwest基于Promises，支持xmlHttpRequest、JSONP、CORS和CommonJS导入。npm$npminstallreqwest--save特效1.animate.css纯css特效，通过给元素添加样式实现特效npm$npminstallanimate.css--save参考文档https://daneden.github.io/ani...2.tween.jsTweenJS是一个使用JavaScript的简单补间动画库。它的开发是为了与EaselJS库很好地集成，但不依赖于它或特定于它。它支持数字对象属性和CSS样式属性赋值。API简单但功能强大，因此很容易通过链接命令创建复杂的项目。npm$npminstalltween.js--save参考文档http://www.createjs.cc/tweenj...扩展EaselJS：一个使HTML5Canvas标签更容易的JavaScript库。这是创建游戏、生成图稿和处理其他高级图形的用户友好体验。SoundJS：SoundJS提供了一个简单而强大的API来处理音频。实际的音频实现是通过插件执行的，使得处理声音变得简单直接。PreloadJS：PreloadJS是一个用于管理和协调相关资源加载的类库，可以方便的帮你预加载相关资源。3.createjsCreateJS是一套基于HTML5开发的模块化库和工具。基于这些库，可以非常快速地开发基于HTML5的游戏、动画和交互式应用程序。它由4个库组成：easeljs：核心库，包括显示列表和事件机制；preloadjs：预加载；tweenjs：组件补间动画；soundjs：音频处理。CreateJS为npm安装重新打包了核心库。npm$npminstallcreatejs--save参考文档http://www.createjs.cc/https://www.createjs.com/扩展latest-createjs：react、vue等框架因差异可能使用官方包libraries之间的版本冲突问题不能正常使用，可以尝试使用这个包。4.Antmotion是React提供的界面动画特效，包括多种动画组件：单个元素、css样式、进入退出、文本、页面滚动、banner。npm$npm安装rc-tween-one--save$npminstallrc-animate--save$npminstallrc-queue-anim--save$npminstallrc-texty--save$npminstallrc-scroll-anim--save$npminstallrc-banner-anim--save参考文档https://motion.ant.design/com...9.d3.jsD3（或D3.js）是一个基于网络标准的JavaScript可视化库。D3可以借助SVG、Canvas和HTML生动地显示您的数据。D3结合了强大的可视化交互技术和数据驱动的DOM技术，让你借助现代浏览器的强大功能自由可视化数据。npm$npminstalld3参考文档https://github.com/xswei/d3js...10.three.jsopenGL是一个跨平台的3D/2D绘图标准，WebGL是openGL在浏览器上的一种实现。Web前端开发者可以直接使用WebGL接口进行编程，但是WebGL只是一个非常基础的绘图API，需要程序员具备大量的数学知识和绘图知识才能完成3D编程任务，代码量巨大.Threejs封装了WebGL，让前端开发者无需掌握大量的数学知识和绘图知识，就可以轻松进行Web3D开发，降低了门槛，大大提高了效率。npm$npminstallthree--save参考文档https://threejs.org/http://threejs.org/docs/存储1.storestore用于本地存储，支持localstorage、session、cookies等，自动选择第一个可用的本地存储方法。npm$npminstallstore--savereferencedocumentationhttps://github.com/marcuswest...图1.echarts百度的图表，流行的图表组件npm$npminstallecharts--savereferencedocumentationhttps://echarts.apache.org/zh...扩展echarts-gl:echarts的3d库echarts-wordcloud:字符云库2.gg-editor基于G6和Reactnpm的可视化图形编辑器$npminstallgg-editor--保存参考文档https://www.yuque.com/ggedito...MedicalImaging1.cornerstone-coreCornerstone，俗称cornerstone，提供了一个完整的基于web的医学影像核心js库。这个库包含Core.js组件，它是一个轻量级的JavaScript库，用于在支持HTML5canvas元素的现代网络浏览器中显示医学图像。npm$npminstallcornerstone-core--save参考文档https://docs.cornerstonejs.org/extendedcornerstone-math:数学函数包cornerstone-tools:toolkitcornerstone-tools-cn:将工具包中的工具翻译成中文翻译（由我制作）cornerstone-web-image-loader：用于加载图片2.dicom-parserdicomParser是一个轻量级库，支持在HTML5网络浏览器（IE10+）、Node.js和Meteor中解析DICOM文件。dicomParser快速、易于使用并且不需要外部依赖。npm$npminstalldicom-parser--save参考文档https://github.com/cornerston...3.hammerjsHammer是一个开源库，可以识别由触摸、鼠标和指针引起的手势。Hammer没有任何依赖项，而且很小，压缩后只有3.96kB。npm$npminstallhammerjs--save参考文档http://hammerjs.github.io/CSSINJS1.classnames一个简单的JavaScript库，用于将类名连接在一起，支持在浏览器、nodejs和webpack中使用。npm$npminstallclassnames--save参考文档https://github.com/JedWatson/...2.cssmodules解决css全局冲突问题，添加局部作用域和模块依赖，使用非常方便。一般使用脚手架搭建的项目可以直接使用css模块，比如react、vue等常见的脚手架。如果自己搭建脚手架，需要通过配置webpack的css配置来开启css模块。参考文档https://github.com/css-module...3.reactcssreact用于支持inline样式的面向对象编写。npm$npminstallreactcss--save参考文档https://github.com/casesandbe...4.lessLess是一种CSS预处理语言，扩展了CSS语言，增加了变量、Mixin、函数等特性，使得CSS更易于维护和扩展。Less可以运行在Node或浏览器上。npm$npminstallless--save参考文档http://lesscss.cn/http://lesscss.org/general1.momentJavaScript日期处理类库npm$npminstallmoment--save参考文档http://momentjs。cn/2.lodash是一个一致的、模块化的、高性能的JavaScript实用程序库。npm$npminstalllodash--save参考文档https://www.lodashjs.com/3。faker用于生成随机数据npm$npminstallfaker--save参考文档https://github.com/Marak/Fake。..4.qs用于URL上的参数转换npm$npminstallqs--save参考文档https://github.com/ljharb/qs5.timeago.js用于将时间转换成格式如"几分钟前”npm$npminstalltimeago.js--save参考文档https://github.com/hustcc/tim...6.html2canvas用于浏览器截图npm$npminstallhtml2canvas--save参考文档https://github.com/hustcc/tim...6.html2canvas/html2canvas.hertzen.com/7.mockjs生成随机数据并拦截ajax请求可以在所有平台（PC和移动触摸界面）上轻松实现。npm$npminstalltouchslider--save参考文档https://github.com/colinrothe...9.pageswitch页面切换器，最多支持121种切页效果，还可以支持自定义切页动画！与TouchSlider.js的区别pageSwitch.js的适用场景是全屏切换，即一屏一屏，在此基础上实现了一百多种切换效果。TouchSlider.js专注于滑动效果，不仅支持全屏切换，还支持不固定大小的幻灯片切换。npm$npminstallpageswitch--save参考文档https://github.com/qiqiboy/pa...10.script-loader在全局上下文（globalcontext）中执行一段JS脚本。警告：npm$npminstallscript-loader--save不会在node.js中运行一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品。npm$npminstallview-design--save参考文档https://www.iviewui.com/docs/...2.vue-awesome-swiper基于Swiper4，一个适合Vue的轮播组件，支持服务端渲染和单页应用程序。npm$npminstallvue-awesome-swiper--save参考文档https://github.com/surmon-chi...3.vue-carousel-3dvue的3dcarousel组件npm$npminstallvue-carousel-3d--save参考文档https://wlada.github.io/vue-c...4.vue-clampvuenpm$npminstallvue-clamp--save参考文档多行省略https://justineo.github.io/vu...5.vue-cookiesvue的cookies管理工具npm$npminstallvue-cookies--save参考文档https://github.com/cmp-cc/vue...6.vue-happy-scrollonescroll基于vue2.0美化浏览器滚动条的bar插件。npm$npminstallvue-happy-scroll--save参考文档https://github.com/tangdaohai...7.vue-holderjsVue图片占位工具npm$npminstallvue-holderjs--save参考文档https://github.com/tangdaohai.../github.com/boogermann...8.vuedraggablevue的拖放组件npm$npminstallpageswitch--save参考文档https://github.com/Vivify-Ide...React1的前端UI。antd蚂蚁，一套企业级UI设计语言和React组件库。（我主要用antd做react）npm$npminstallantd--save参考文档https://github.com/ant-design...https://ant.design/docs/react...https://ant.design/components...2.umiumi，中文发音为Wumi，是一个可插拔的企业级React应用框架。在路由的基础上，umi支持类next.js的常规路由，以及各种高级路由功能，并以此扩展功能，比如支持路由层面的按需加载。然后配备完善的插件体系，覆盖从源代码到构建产品的每一个生命周期，支持各种功能扩展和业务需求。目前内外部共有50+个插件。umi是蚂蚁金服底层前端框架，直接或间接服务过600+应用，包括java、node、H5无线、离线（Hybrid）应用、纯前端资产应用、CMS应用等。服务好我们内部用户，希望他也能服务好外部用户。npm(create-umi是umi的脚手架)$npminstallcreate-umi-g参考文档https://github.com/umijs/crea...https://umijs.org/zh/guide/3.dvadva首先是基于redux和redux-saga的数据流解决方案，并且为了简化开发体验，dva还内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架。npm$npminstalldva--save参考文档https://github.com/dvajs/dvahttps://dvajs.com/4.react-cookiesReact的cookie管理工具npm$npminstallreact-cookies--save5.react-custom-scrollbarsreact的滚动条工具，美化浏览器滚动条npm$npminstallreact-custom-scrollbars--save参考文档https://github.com/malte-wess...6.nprogress文档加载进度条，使用在顶部或者页面底部npm$npminstallnprogress--save参考文档https://github.com/rstacruz/n...7.react-infinite-scrollerreact的滚动加载组件npm$npminstallreact-infinite-scroller--保存参考文档https://github.com/CassetteRo...https://cassetterocks.github....8.react-loadingReact加载小工具npm$npminstallreact-loading--save参考文档https://github.com/fakiolinho...9.react-resizable可以通过手柄和鼠标调整react组件的大小npm$npminstallreact-resizable--savereference文档https://github.com/STRML/reac...10.react-router-breadcrumbs-hocreact路由面包屑工具npm$npminstallreact-router-breadcrumbs-hoc--save参考文档https://github.com/icd2k3/rea...11.react-jsganttreactTetu组件的gannpm$npminstallreact-jsgantt--savereferencedocumentationhttps://github.com/jsGantttImp...13.react-tagcloudreact的角色云npm$npminstallreact-tagcloud--save参考文档https://github.com/madox2/rea...14.react-colorreact的调色板npm$npminstallreact-color--保存参考文档http://casesandberg.github.io...https://github.com/casesandbe...15.prop-typesreact的运行时类型检查工具npm$npminstallprop-types--保存参考文档https://github.com/facebook/p...https://zh-hans.reactjs.org/d...16.react-pdfreact的pdf工具npm$npminstallreact-pdf--savereferencedocumentationhttps://github.com/wojtekmaj/...移动端1.vant喜欢vue移动端组件npm$npminstallvant--save参考文档https://github.com/youzan/van...2.suiSUIMobile是基于Framework7开发的一套UI库，用的比较早，已经弃用了。参考文档https://sui.ctolog.com/小程序1.colorui一套纯css小程序UIhttps://www.color-ui.com/2.echarts-for-weixinecharts支持微信小程序参考文档echarts-for-weixinhttps://github.com/ecomfe/ech...
