【整理分享】vue项目上可用的7个实用JS库

【整理分享】vue项目上可用的7个实用JS库

借助开源库加速VUE项目的开发进度是现代前端开发比较常见的方式,平常收集一些JavaScript库介绍,在遇到需要的时候可以信手拈来。【相关推荐:vuejs视频教程、vuejs视频教程】

VUE 生态有很多不错的依赖库或者组件,是使用VUE开发前端的原因之一。

1. vueuse

这是 GitHub 上星最多的库之一,拥有超过 12.8k 颗星,这是一组基于vuejs视频教程 的实用函数库。

它的初衷就是将一切原本并不支持响应式的 JS API 变得支持响应式,省去程序员自己写相关代码。

立即学习“前端免费学习笔记(深入)”;

import { useLocalStorage, useMouse, usePreferredDark } from "@vueuse/core";export default {    setup() {        // tracks mouse position        const { x, y } = useMouse();        // is user prefers dark theme        const isDark = usePreferredDark();        // persist state in localStorage        const store = useLocalStorage("my-storage", {            name: "Apple",            color: "red",        });        return { x, y, isDark, store };    },};

登录后复制

GitHub:vuejs视频教程

2. vue-js-modal

这是一个易于使用、高度可定制的 Vue.js 模态库,该库支持静态和动态两种类型的模态,静态是通过模板明确定义的,动态是根据传递给“显示模态”函数的配置生成的。这个库在 Github 上有超过 4.2k 星。

vue-js-modal.gif

GitHub:vuejs视频教程

3. vue-wait

这个库可以在没有任何冲突的情况下控制页面上的各种加载状态。它的核心原理是管理一个具有多个加载状态的数组(或者,可选地,一个 Vuex 存储)。集成加载器组件开始监听其注册的加载器并立即进入加载状态。这个库在 Github 上有超过 1.9k 颗星。

vue-wait.gif

GitHub:vuejs视频教程

4. good-table

表格是软件开发中最常用的组件之一,这是一个易于使用的强大数据表,具有高级自定义功能,包括排序、列过滤、分页、分组等。它在 GitHub 上拥有超过 2k 星。

GitHub:vuejs视频教程

5. vue-notification

向用户显示消息是应用程序的基本功能之一,这个库将帮助构建漂亮的通知。它提供了许多功能,如动画、自定义位置、自定义样式等等。这个库在 Github 上有超过 2.3K 颗星。

vue-notification.gif

GitHub:vuejs视频教程

6. tree select

顾名思义,这是一个带有嵌套选项的多选组件。它包括许多功能,如支持嵌套选项的单选和多选、模糊匹配、异步搜索、延迟加载(仅在需要时加载深层选项的数据)等等。它在 GitHub 上拥有超过 2.6K 颗星。

GitHub:vuejs视频教程

7. egjs-infinite grid

如果必须使用网格布局,那么这个库是一个很好的资源,该库用于根据网格类型无限排列包括内容的元素。

grid.jpg

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";function getItems(nextGroupKey, count) {    const nextItems = [];    for (let i = 0; i `);    }    return nextItems;}const ig = new MasonryInfiniteGrid(".container", {    gap: 5,});ig.on("requestAppend", (e) => {    const nextGroupKey = (+e.groupKey || 0) + 1;    ig.append(getItems(nextGroupKey, 10), nextGroupKey);});ig.renderItems();

登录后复制

GitHub:vuejs视频教程

(学习视频分享:vuejs视频教程、vuejs视频教程)

以上就是【整理分享】vue项目上可用的7个实用JS库的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3230953.html

(0)
上一篇 2025年4月1日 16:46:58
下一篇 2025年4月1日 16:47:35

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 一文聊聊Vue组件生命周期的三个阶段(创建、运行和销毁)

    本篇文章带大家详细介绍一下vue组件生命周期的三个阶段:创建阶段、运行阶段和销毁阶段,希望对大家有所帮助! 组件生命周期 生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时间…

    2025年4月1日 编程技术
    000
  • vue的空格报错怎么办

    vue空格报错的解决办法:1、找到目录build下的webpack.base.conf.js文件,把其中的rules注销掉;2、重新执行“npm run dev”;3、打开test目录下的.eslintrc.js文件,添加自定义规则;4、打…

    2025年4月1日
    100
  • vue中怎么删除一条数据

    vue中删除一条数据的方法:1、通过“arr.splice(index, 1)”方法删除普通数组中的某一条数据;2、通过“arr.findIndex(item => {…}arr.splice(id1, 1)”方法删除数组…

    2025年4月1日
    100
  • vue增加数据不更新怎么办

    vue增加数据不更新的解决办法:1、使用“this.$set(target, key, value);”或者“Vue.set(target, key, value)”方式新增属性;2、在render函数中动态使用多个slot,并且给slot…

    2025年4月1日
    100
  • vue怎么替换空格

    vue实现替换空格的方法:1、创建一个vue示例文件;2、通过正则表达式“string = string.replace(/\s/g,” “);”替换所有的空格;3、通过“console.log(string);”输…

    2025年4月1日
    100
  • Vue3这样写列表页,让性能更好更高效!

    在开发管理后台过程中,一定会遇到不少了增删改查页面,而这些页面的逻辑大多都是相同的,这样子会导致代码耦合度越来越高,下面,我们将这些可复用的数据抽离出来成hook,既解决耦合度的问题又提高工作效率。 在开发管理后台过程中,一定会遇到不少了增…

    2025年4月1日
    100
  • vue的交错过渡怎么实现

    vue实现交错过渡的方法:1、打开相应的vue文件;2、使用ransition-group组件对包裹的列表中每一个元素批量进行transtion组件的操作;3、给每个列表项加上不同延时即可。 本教程操作环境:Windows10系统、Vue …

    2025年4月1日 编程技术
    100
  • vue menu不刷新怎么办

    vue menu不刷新的解决办法:1、在index页面编写“”;2、将缓存name设置为“test-keep-alive”;3、在router文件配置“{path: ‘/Material’,name: ‘…

    2025年4月1日
    100
  • 聊聊Vue3+hook怎么写弹窗组件更快更高效

    为什么会有这个想法 在管理后台开发过程中,涉及到太多的弹窗业务弹窗,其中最多的就是“添加XX数据”,“编辑XX数据”,“查看XX详情数据”等弹窗类型最多。【相关推荐:vuejs视频教程、vuejs视频教程】 这些弹窗组件的代码,很多都是相同…

    2025年4月1日 编程技术
    100
  • 一文带你详解Vue中的组件化编程

    本篇文章带大家聊聊vue中的组件化编程,分享一下对vue组件化的一个理解,最主要的单文件组件,希望对大家有所帮助! 组件化让我越来越感觉到框架的力量了 一.模块与组件,模块化与组件化 对组件的理解 如果以我们原来编写一个网页的方式 立即学习…

    2025年4月1日 编程技术
    100

发表回复

登录后才能评论