国内最流行的 Vue UI 组件库,文档完整,支持在 Vue3 下使用。
https://element.eleme.cn/#/zh-CN
有赞公司旗下的开源组件库,适用于移动端开发。组件齐全,使用简单,UI 设计也非常漂亮。
https://youzan.github.io/vant/#/zh-CN
Ant Design 的 Vue 实现,开发和服务于企业级后台产品。
https://www.antdv.com/components/overview-cn
vue 常用工具集合,由 vue 官方团队维护。
https://github.com/vuejs/awesome-vue
VueUse 是一组基于 Composition API 的实用函数。
vue 虚拟列表,支持大数据量渲染。
https://github.com/Akryum/vue-virtual-scroller
vue 虚拟网格列表,支持大数据量渲染。
https://github.com/rocwang/vue-virtual-scroll-grid
Pinia 持久化。
https://www.npmjs.com/package/pinia-plugin-persistedstate
Vuex 持久化。
https://www.npmjs.com/package/vuex-persistedstate
自动导入插件, 可自动导入 vue vue-router pinia 等。
https://www.npmjs.com/package/unplugin-auto-import
https://www.npmjs.com/package/vue3-print-nb
简单的 vue3 打印插件。不要页眉页脚,边距设置为无时 ,一张纸对应 dom 宽 793px 高 1123px
在线代码编辑器,基于 CodeMirror@6 的新版本,仅适用于 Vue3。
https://www.npmjs.com/package/vue-codemirror
https://swiperjs.com/vue#installation
基于 vue 的 swiper 文档,
!> 默认情况下,Swipeper Vue.js 使用的 Swiper 的核心模块(没有任何额外的模块)。如果要使用导航,分页和其他模块,则必须先引入它们,具体查看用法部分。
Vue 拖拽组件
https://www.npmjs.com/package/vue-draggable-plus
Vue 生成二维码,如果你需要生成二维码,用这个组件绝对没错,公司的项目一直在使用,可以方便快捷的生成任何形式的二维码。包括彩色和自定义样式。
https://www.npmjs.com/package/vue-qr
Vue 图片剪裁,无论开发任何应用,都需要用户上传图片。但又为了保持页面的一致性,所以要对上传的图片,安装设计规范,进行裁切。这时候你就可以使用这个组件了。
https://github.com/xyxiao001/vue-cropper
图片懒加载,其实很多 UI 组件库已经有这个图片懒加载的给功能了,但是还是单独提出来一下,因为它不会和其它 Vue 组件库冲突,而且功能更多。
https://www.npmjs.com/package/vue-lazyload
emoji 表情包,如果你的应用需要支持表情包,那么这个组件库是你的不二之选,支持 vue2、3。
Vue 上传组件,上传也是我们绕不开的开发需求,所以你必须拥有一个完全好用的上传组件。它非常好用,但缺点是没有官方网站,只有一个 Github 地址。
https://github.com/saivarunk/vue-simple-upload
是一个一致性、模块化、高性能的 JavaScript 实用工具库。这个函数库可以在原生 JS 中使用,也可以在 React 和 Vue 中使用。几乎你开发中所有的函数,这个库都给你写好。你需要作的就是熟练和恰到好处的使用。
使用 es 模块按需引入
//npm i lodash-es
import { random } from "lodash-es";
const number = random(0, 5);
dompurify 是一个 DOM 节点过滤器,可以防止 XSS 攻击。
https://www.npmjs.com/package/dompurify
图片剪裁工具。
https://github.com/fengyuanchen/cropperjs/tree/v2
获取浏览器指纹。
https://github.com/fingerprintjs/fingerprintjs/blob/master/docs/api.md#webpackrollupnpmyarn
将 markdown 语法解析为 html。
https://github.com/markedjs/marked
vue3 环境的 Markdown 编辑器,使用 jsx 和 typescript 语法开发,支持在 tsx 项目使用。
https://github.com/imzbf/md-editor-v3
将代码块高亮。
https://highlightjs.readthedocs.io/en/latest/
根据文件扩展名获取 MIME 类型,常用于下载文件。
https://www.npmjs.com/package/mime
绝大部分的验证方法都在里面。
https://github.com/validatorjs/validator.js
通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据,而不仅仅是字符串。
https://localforage.docschina.org/
引导页面的工具库,可以用来引导用户操作页面。
https://github.com/kamranahmedse/driver.js
提供了基本的 WebSocket 功能和高级功能,是一个适用于前端和后端的实时双向通信库,需要前端和后端同时使用这个库。
前端文档: https://socket.io/zh-CN/docs/v4/client-initialization/
让你的 svg 使它们看起来像是被绘制的。
https://github.com/maxwellito/vivus
一个简单、轻量级的脚本 API,用于处理 Cookie。
https://www.npmjs.com/package/js-cookie
https://www.swiper.com.cn/api/
swiper 的 api 文档
https://github.com/eligrey/FileSaver.js/
客户端存储文件的解决方案
https://github.com/qq15725/modern-screenshot
将 dom 元素转化成图片。
JavaScript 图像压缩器。使用浏览器的原生 canvas.toBlobAPI 进行压缩工作,这意味着它是有损压缩,异步的,在不同的浏览器中具有不同的压缩效果。通常使用它在上传客户端映像文件之前对其进行预压缩。
https://www.npmjs.com/package/compressorjs
vue3 环境的 Markdown 编辑器。
https://github.com/imzbf/md-editor-v3
一个查询字符串解析和字符串化库。
https://www.npmjs.com/package/qs
数字增长动画库。
https://github.com/inorganik/countUp.js/
https://inorganik.github.io/countUp.js/
JavaScript 日期处理类库
Bilibili 开源的 html5 视频播放器,需要在 video 标签上加controls
属性才显示控件。
https://github.com/Bilibili/flv.js/
纳米级的进度条,涓涓细流动画告诉你的用户,一些事情正在发生!
打字搞效果!输入任何字符串,然后观察它以您设置的速度键入,退格键入的内容,然后为您设置的字符串开始一个新句子。
仓库地址 https://github.com/mattboldt/typed.js 演示地址 https://mattboldt.github.io/typed.js/
它是显示几小时之前,很多随时更新的网站和应用,为了显示出及时性,不再显示具体发布的时间,而是改为几分钟或者几小时前发布的。这样显着时效性更好。这个插件的作用就是这个。
https://github.com/hustcc/timeago.js
满足企业级开发的需求。算是国内最好的可视化开发组件库了。
https://echarts.apache.org/zh/index.html
移动端 Rem 适配方案。
https://www.npmjs.com/package/lib-flexible
移动端调试神器。
https://www.npmjs.com/package/vconsole
如果是为程序员开发的应用和网站,一定要支持 Markdown 功能。
https://pandao.github.io/editor.md/
有些功能像 ECharts...
https://g2.antv.antgroup.com/examples
炫酷的可视化表格
https://s2.antv.antgroup.com/examples
类似于 Echarts 的关系图...
https://g6.antv.antgroup.com/examples
X6 是基于 HTML 和 SVG 的图编辑引擎,方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
OpenLayers 使在任何网页中都可以轻松放置动态地图。它可以显示从任何来源加载的地图切片、矢量数据和标记。
中文示例
http://www.openlayers.vip/
百度地图 API GL (pc)
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey
百度地图 API V3.0 (h5、pc)
https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey
vue3 项目模板
https://gitee.com/lili_a/vue-ts-pinia-template
vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。
https://panjiachen.github.io/vue-element-admin-site/zh/
基于 Vue、Datav、Echart 框架的数据大屏项目
https://gitee.com/MTrun/big-screen-vue-datav
DataV 是一个基于 Vue 的数据可视化组件库
基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
https://github.com/bailicangdu/vue2-elm
基于 vue + element-ui 的后台管理系统
https://github.com/bailicangdu/vue2-manage
基于 node.js + Mongodb 构建的后台系统,整个项目分为两部分:前台项目接口、后台管理接口,共 60 多个。涉及登陆、注册、添加商品、商品展示、筛选排序、购物车、下单、用户中心等,构成一个完整的流程。
https://github.com/bailicangdu/node-elm
Normalize.css 使浏览器更加一致地呈现所有元素,并且符合现代标准。它仅针对需要正常化的样式。
https://github.com/necolas/normalize.css
Tailwind CSS 的工作原理是扫描您的所有 HTML 文件、JavaScript 组件和任何其他模板以查找类名,生成相应的样式,然后将它们写入静态 CSS 文件。
它快速、灵活且可靠——运行时间为零。
https://tailwindcss.com/docs/installation
纯 css 的动画库,所以无论你前端使用什么框架,都可以非常方便的使用它,内置了超多的动画效果,并且预览起来也非常方便。
轮播图效果多,中文文档齐全,而且还有 PC 端和移动端。
这款插件可以很好的解决移动端的滚动经常会出现不流畅,延迟等问题。他是基于 H5 的,不依赖来与其它前端框架,侵入性很小,实用性很大。