Code Monkey home page Code Monkey logo

mydoc's Introduction

Vue UI 库

Element

国内最流行的 Vue UI 组件库,文档完整,支持在 Vue3 下使用。

https://element.eleme.cn/#/zh-CN

vant

有赞公司旗下的开源组件库,适用于移动端开发。组件齐全,使用简单,UI 设计也非常漂亮。

https://youzan.github.io/vant/#/zh-CN

antdv

Ant Design 的 Vue 实现,开发和服务于企业级后台产品。

https://www.antdv.com/components/overview-cn

Vue 常用工具

awesome-vue

vue 常用工具集合,由 vue 官方团队维护。

https://github.com/vuejs/awesome-vue

VueUse

VueUse 是一组基于 Composition API 的实用函数。

https://vueuse.org/guide/

vue-virtual-scroller

vue 虚拟列表,支持大数据量渲染。

https://github.com/Akryum/vue-virtual-scroller

vue-virtual-scroll-grid

vue 虚拟网格列表,支持大数据量渲染。

https://github.com/rocwang/vue-virtual-scroll-grid

pinia-plugin-persistedstate

Pinia 持久化。

https://www.npmjs.com/package/pinia-plugin-persistedstate

vuex-persistedstate

Vuex 持久化。

https://www.npmjs.com/package/vuex-persistedstate

unplugin-auto-import

自动导入插件, 可自动导入 vue vue-router pinia 等。

https://www.npmjs.com/package/unplugin-auto-import

vue3-print-nb

https://www.npmjs.com/package/vue3-print-nb

简单的 vue3 打印插件。不要页眉页脚,边距设置为无时 ,一张纸对应 dom 宽 793px 高 1123px

vue-codemirror

在线代码编辑器,基于 CodeMirror@6 的新版本,仅适用于 Vue3。

https://www.npmjs.com/package/vue-codemirror

Swiper Vue.js

https://swiperjs.com/vue#installation

基于 vue 的 swiper 文档,

!> 默认情况下,Swipeper Vue.js 使用的 Swiper 的核心模块(没有任何额外的模块)。如果要使用导航,分页和其他模块,则必须先引入它们,具体查看用法部分

vue-draggable-plus

Vue 拖拽组件

https://www.npmjs.com/package/vue-draggable-plus

vue-qr

Vue 生成二维码,如果你需要生成二维码,用这个组件绝对没错,公司的项目一直在使用,可以方便快捷的生成任何形式的二维码。包括彩色和自定义样式。

https://www.npmjs.com/package/vue-qr

vue-cropper

Vue 图片剪裁,无论开发任何应用,都需要用户上传图片。但又为了保持页面的一致性,所以要对上传的图片,安装设计规范,进行裁切。这时候你就可以使用这个组件了。

https://github.com/xyxiao001/vue-cropper

vue-lazyload

图片懒加载,其实很多 UI 组件库已经有这个图片懒加载的给功能了,但是还是单独提出来一下,因为它不会和其它 Vue 组件库冲突,而且功能更多。

https://www.npmjs.com/package/vue-lazyload

emoji-mart-vue-fast

emoji 表情包,如果你的应用需要支持表情包,那么这个组件库是你的不二之选,支持 vue2、3。

vue-simple-upload

Vue 上传组件,上传也是我们绕不开的开发需求,所以你必须拥有一个完全好用的上传组件。它非常好用,但缺点是没有官方网站,只有一个 Github 地址。

https://github.com/saivarunk/vue-simple-upload

工具类库

lodash.js

是一个一致性、模块化、高性能的 JavaScript 实用工具库。这个函数库可以在原生 JS 中使用,也可以在 React 和 Vue 中使用。几乎你开发中所有的函数,这个库都给你写好。你需要作的就是熟练和恰到好处的使用。

使用 es 模块按需引入

//npm i lodash-es
import { random } from "lodash-es";

const number = random(0, 5);

https://www.lodashjs.com/

dompurify

dompurify 是一个 DOM 节点过滤器,可以防止 XSS 攻击。

https://www.npmjs.com/package/dompurify

cropperjs

图片剪裁工具。

https://github.com/fengyuanchen/cropperjs/tree/v2

fingerprintjs

获取浏览器指纹。

https://github.com/fingerprintjs/fingerprintjs/blob/master/docs/api.md#webpackrollupnpmyarn

markedjs

将 markdown 语法解析为 html。

https://github.com/markedjs/marked

md-editor-v3

vue3 环境的 Markdown 编辑器,使用 jsx 和 typescript 语法开发,支持在 tsx 项目使用。

https://github.com/imzbf/md-editor-v3

highlightjs

将代码块高亮。

https://highlightjs.readthedocs.io/en/latest/

mime

根据文件扩展名获取 MIME 类型,常用于下载文件。

https://www.npmjs.com/package/mime

validator.js

绝大部分的验证方法都在里面。

https://github.com/validatorjs/validator.js

localforage

通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据,而不仅仅是字符串。

https://localforage.docschina.org/

driver.js

引导页面的工具库,可以用来引导用户操作页面。

https://github.com/kamranahmedse/driver.js

Socket.IO

提供了基本的 WebSocket 功能和高级功能,是一个适用于前端和后端的实时双向通信库,需要前端和后端同时使用这个库。

前端文档: https://socket.io/zh-CN/docs/v4/client-initialization/

vivus

让你的 svg 使它们看起来像是被绘制的。

https://github.com/maxwellito/vivus

js-cookie

一个简单、轻量级的脚本 API,用于处理 Cookie。

https://www.npmjs.com/package/js-cookie

swiper

https://www.swiper.com.cn/api/

swiper 的 api 文档

FileSaver

https://github.com/eligrey/FileSaver.js/

客户端存储文件的解决方案

modern-screenshot

https://github.com/qq15725/modern-screenshot

将 dom 元素转化成图片。

compressor.js

JavaScript 图像压缩器。使用浏览器的原生 canvas.toBlobAPI 进行压缩工作,这意味着它是有损压缩,异步的,在不同的浏览器中具有不同的压缩效果。通常使用它在上传客户端映像文件之前对其进行预压缩。

https://www.npmjs.com/package/compressorjs

md-editor-v3

vue3 环境的 Markdown 编辑器。

https://github.com/imzbf/md-editor-v3

qs

一个查询字符串解析和字符串化库。

https://www.npmjs.com/package/qs

countUp.js

数字增长动画库。

https://github.com/inorganik/countUp.js/

https://inorganik.github.io/countUp.js/

moment.js & Day.js

JavaScript 日期处理类库

https://dayjs.fenxianglu.cn/

http://momentjs.cn/

flv.js

Bilibili 开源的 html5 视频播放器,需要在 video 标签上加controls属性才显示控件。

https://github.com/Bilibili/flv.js/

nprogress

纳米级的进度条,涓涓细流动画告诉你的用户,一些事情正在发生!

https://madewith.cn/23

typed.js

打字搞效果!输入任何字符串,然后观察它以您设置的速度键入,退格键入的内容,然后为您设置的字符串开始一个新句子。

仓库地址 https://github.com/mattboldt/typed.js 演示地址 https://mattboldt.github.io/typed.js/

timeago.js

它是显示几小时之前,很多随时更新的网站和应用,为了显示出及时性,不再显示具体发布的时间,而是改为几分钟或者几小时前发布的。这样显着时效性更好。这个插件的作用就是这个。

https://github.com/hustcc/timeago.js

echarts

满足企业级开发的需求。算是国内最好的可视化开发组件库了。

https://echarts.apache.org/zh/index.html

lib-flexible

移动端 Rem 适配方案。

https://www.npmjs.com/package/lib-flexible

vconsole

移动端调试神器。

https://www.npmjs.com/package/vconsole

Markdown

如果是为程序员开发的应用和网站,一定要支持 Markdown 功能。

https://pandao.github.io/editor.md/

AntV

G2

有些功能像 ECharts...

https://g2.antv.antgroup.com/examples

S2

炫酷的可视化表格

https://s2.antv.antgroup.com/examples

G6

类似于 Echarts 的关系图...

https://g6.antv.antgroup.com/examples

X6

X6 是基于 HTML 和 SVG 的图编辑引擎,方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。

https://x6.antv.antgroup.com/

webGIS

openlayers

OpenLayers 使在任何网页中都可以轻松放置动态地图。它可以显示从任何来源加载的地图切片、矢量数据和标记。

官方网站
https://openlayers.org/

中文示例
http://www.openlayers.vip/

BMap

百度地图 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

项目

vue-ts-pinia

vue3 项目模板

https://gitee.com/lili_a/vue-ts-pinia-template

vue-element-admin

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

https://panjiachen.github.io/vue-element-admin-site/zh/

big-screen-vue-datav

基于 Vue、Datav、Echart 框架的数据大屏项目

https://gitee.com/MTrun/big-screen-vue-datav

datav

DataV 是一个基于 Vue 的数据可视化组件库

http://datav.jiaminghi.com/

vue2-elm

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

https://github.com/bailicangdu/vue2-elm

vue2-manage

基于 vue + element-ui 的后台管理系统

https://github.com/bailicangdu/vue2-manage

node-elm

基于 node.js + Mongodb 构建的后台系统,整个项目分为两部分:前台项目接口、后台管理接口,共 60 多个。涉及登陆、注册、添加商品、商品展示、筛选排序、购物车、下单、用户中心等,构成一个完整的流程。

https://github.com/bailicangdu/node-elm

接口文档地址

css

normalize.css

Normalize.css 使浏览器更加一致地呈现所有元素,并且符合现代标准。它仅针对需要正常化的样式。

https://github.com/necolas/normalize.css

tailwindcss

Tailwind CSS 的工作原理是扫描您的所有 HTML 文件、JavaScript 组件和任何其他模板以查找类名,生成相应的样式,然后将它们写入静态 CSS 文件。

它快速、灵活且可靠——运行时间为零。

https://tailwindcss.com/docs/installation

Animate.css

纯 css 的动画库,所以无论你前端使用什么框架,都可以非常方便的使用它,内置了超多的动画效果,并且预览起来也非常方便。

https://animate.style/

效果组件

swiper

轮播图效果多,中文文档齐全,而且还有 PC 端和移动端。

https://www.swiper.com.cn/

mescroll.js

这款插件可以很好的解决移动端的滚动经常会出现不流畅,延迟等问题。他是基于 H5 的,不依赖来与其它前端框架,侵入性很小,实用性很大。

http://www.mescroll.com/api.html

mydoc's People

Contributors

li-0221 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.