常用第三方Vue/NodeJS组件、工具

原创 已于 2024-09-01 14:42:17 修改 · 1.4k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js
于 2022-04-29 13:48:31 首次发布
本文精选了一系列Vue和NodeJS领域的实用组件和工具，涵盖了下拉树选择框、拖拽库、文件压缩、表单生成等多个方面，帮助开发者提高开发效率。

1、下拉树选择框：vue-treeselect

vue-treeselect 是一个多选组件，具有对 Vue.js嵌套选项支持。

  • 支持嵌套选项的单选和多选
  • 模糊匹配
  • 异步搜索
  • 延迟加载（仅在需要时加载深度选项的数据）
  • 键盘支持（使用Arrow Up & Arrow Down键导航，使用键选择选项Enter等）
  • 丰富的选项和高度可定制的
  • 支持 多种浏览器


需要Vue 2.2+

官网：Vue-Treeselect | Vue-Treeselect 中文网

2、功能强大的JavaScript 拖拽库

官网：Sortable.js中文网

3、压缩文件夹：compressing

官网：compressing - npm

4、JSON生成复杂表单：vue-dynamic-form-component

官网：vue-dynamic-form-component 

5、Json编辑器：v-jsoneditor

官网： GitHub - yansenlei/VJsoneditor: vue use jsoneditor

6、vue进度条插件：nprogress

官网：https://www.npmjs.com/package/nprogress

7、Vue数字滚动插件，用于创建数字计数动画：vue-count-to

8、vue-meta插件：Vue Meta 插件允许你在 Vue 应用中动态管理 HTML 的 <head> 部分，包括设置页面标题、描述、关键词、Open Graph 标签等元数据。这对于改善 SEO、社交媒体分享外观以及实现动态页面标题等功能非常有用。

9、vuedraggable插件：

vuedraggable 是一个基于 Vue.js 和 Sortable.js 的拖拽组件，可以用来创建可拖拽的列表。

10、轻量级模糊查询：fuse.js

11、vue导出文件插件：file-saver插件

12、vue中操作cookie的插件：js-cookie

13、vue jsencrypt插件：用于在 JavaScript 中进行公钥加密的库

14、vue clipboard插件：Vue Clipboard 是一个基于 Clipboard.js 的 Vue 插件，用于在 Vue.js 应用程序中实现剪贴板功能

15、vue3表单构建器：form-create

FcDesigner 在线演示

FcDesigner Vue3版本在线演示

https://github.com/xaboy/form-create-designer

Variant Form 3

Vue3低代码可视化表单: 一款高效的Vue 3低代码表单、工作流表单，包含表单设计器和表单渲染器，可视化设计，一键生成源码，享受更多摸鱼时间。

该低代码可视化表单有完整的API，且能自定义其中的内容，但注意：

可能存在的问题及解决方法
1. 如果使用Vite作为Vue项目的构建工具，Vite会将预构建的依赖缓存到 node_modules/.vite 目录下，如果发现编译打包的VForm3组件复制到 lib/vform 之后没有自动更新，请手工删除新项目里的 node_modules/.vite 目录后重新运行项目。

form-generator：

GitHub - JakHuang/form-generator: :sparkles:Element UI表单设计及代码生成器

vue-form-making：

vue-form-making: 基于Vue的可视化表单设计器，让表单开发简单而高效；高级版本目前已支持 Vue3。

15、vue开发工具下载：

地址：

极简插件官网_Chrome插件下载_Chrome浏览器应用商店

下载 vue.js Devtools，chrome中【扩展程序】->【管理扩展程序】

学习Vue3你需要知道的47个实用开源组件
猿小白的博客
10-27 2719
官网：https://sortablejs.github.io/vue.draggable.next/#/simple。官网：https://varlet.gitee.io/varlet-ui/#/zh-CN/home。官网：https://www.antdv.com/docs/vue/introduce-cn。官网：https://better-scroll.github.io/docs/zh-CN/官网：https://vant-contrib.gitee.io/vant/#/zh-CN。
从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建）
热门推荐
天降风云的博客
05-26 9万+
前言VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vuejs作为前端框架，vuejs轻量、简单的特性使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。我们今天使用的ElementUI，是饿了么团队开发的一款基于vuejs的前端组件库，也是众多vuejs组件库里面比较优秀的一款。这里要说一下我们构建网站所需要用到的一些东西： NodeJS（npm） Webstor
vue中treeselect的基本使用
baicai_123的专栏
12-17 5626
0.vue-treeselect中文网地址：https://www.vue-treeselect.cn/ 1.安装插件：npm install --save @riophae/vue-treeselect 2.引用： importTreeselectfrom'@riophae/vue-treeselect'; import'@riophae/vue-treeselect/dist/vue-treeselect.css'; 3.注册： components:{Treeselect}, ...
TreeSelect 树形选择卡顿优化
weixin_44402520的博客
12-22 1826
TreeSelect 树形选择卡顿优化
别再只用LSTM了！用PyTorch手搓一个TCN时间卷积网络，预测电力负荷（附完整代码和ETTh1数据集）
最新发布
weixin_30838873的博客
04-27 181
本文详细介绍了如何使用PyTorch构建时间卷积网络（TCN）进行电力负荷预测，相比传统LSTM模型，TCN在训练速度、长程依赖捕捉和梯度稳定性方面具有显著优势。文章包含完整的PyTorch实现代码、ETTh1数据集处理流程以及工业部署优化建议，帮助开发者快速掌握TCN在时间序列预测中的应用。
VueTreeselect 使用史诗级教程
m0_60510238的博客
03-24 6944
在使用vue2前端页面开发的时候，会用到树形的列表展示数据，使用VueTreeselect可以更加美观的展示数据默认的基础使用请参考官方的入门文档很多小伙伴都有使用 RuoYi 框架，其中部门管理中就有使用到本文的主角 VueTreeselect。
vue中使用treeselect
weixin_40800926的博客
11-08 3939
官网链接：https://vue-treeselect.js.org/ 1.安装依赖： npm install --save @riophae/vue-treeselect 2.在使用在插件的页面引入： import Treeselect from '@riophae/vue-treeselect' // import the styles import '@riophae/vue-t...
vuejs和nodejs_将Python，NodeJS和VueJS部署为微服务
weixin_26738395的博客
08-27 808
vuejs和nodejsIn this article I cover a number of different concepts and technologies; Web Sockets, Python, Node, Vue JS, Docker, and bring them all together in a microservice architecture. 在本文中，我介绍了许多不...
Vue SPA + Nodejs项目实战
陈峰的专栏
06-23 2万+
Vue SPA + Nodejs项目实战文章链接：http://blog.csdn.net/i348018533/article/details/73605176本文主要阐述的是使用了vue spa单页应用的后台管理系统配合nodejs接口代理，并使用webpack打包编译的项目架构分享。 面向对象是有一定前端开发基础对vue nodejs webpack有一定认识的开发。Vue简介介绍 自底向上
nodejs 代替python_将您的VUE组件“编译”为独立的html/js/css支需python(不需要nodejs）...
weixin_39681724的博客
11-30 316
vbuild"Compile" your VueJS components (*.vue) to standalone html/js/css ... python only, no need of nodejs. And you can use python components with vbuild, in your vue/sfc files !!!It's just an utility...
vue下拉多选组件vue-treeselect
Xiao_XianYu_的博客
02-09 1541
<el-form-item label="岗位"> <treeselect :multiple="multiple" v-model="form.postIds" :options="postOptions" :show-count="true" placeholder="请选择岗位" :limit="6" :limitText="count => `及其它${count}项`" /> </el-form-.
treeSelect树形选择器使用
小林的博客
11-02 3万+
vue-treeselect树形选择器 treeSelect是Vue的一个插件，用于进行一个树形选择的场景，这个组件可以满足大部分场合的使用。 官方文档 1.安装 npm install --save @riophae/vue-treeselect 安装完成之后可以在package.json文件中看到 2.引用，在需要使用的组件上引用 3使用 关于组件属性，大家可以去官方文档看一下，这里着重说一下normailzer，normailzer的意思就是是规范化，意思就是使你的数据格式规范化 treese
vue-treeselect 问题合集、好用的树形下拉组件（vue-treeselect的使用、相关问题解决方案）
IT_dabai的博客
09-28 2万+
vue-treeselect 使用及相关问题解决方案，持续更新！！！ 最新更改：继续优化【问题五】的第二种解决方案（将vue-treeselect + 拖动改变宽度方法进行二次封装，可直接重复调用，增加 saveOldWidth 属性，用来是否保存上一次组件宽度）复制代码即可 上次更改：1.@input 事件里，想要拿到node参数，而不是value参数 2.优化【问题五】的第二种解决方案（考虑页面上存在多个treeselect） 文章只记录部分问题，完整的 组件属性 及 组件的事件 等 可到文档中去查阅
Treeselect是介绍及使用（梳理了我使用这个组件遇到的大部分问题）
qq_71214810的博客
06-20 1万+
这里梳理了我使用这个Treeselect组件遇到的大部分问题，希望大家多多补充，感谢
vue-treeselect(适配Vue3.2)及Element-plus的TreeSelect组件
wang13679201813的博客
09-26 1万+
vue-treeselect组件的使用
Vue- Treeselect组件使用（下拉框树形结构）
路虽远行则将至，事虽难做则必成。
06-03 9187
最近在开发时遇到一个问题，是在输入框里面放一个树形组件。查看饿了吗之后发现都不太适合最后在网上搜了一下，真的是有相关的组件Treeselect，确实有相关文章说明，但是比较乱。在这里记录一下，Treeselect全局使用代码实现1.下包2.注册为全局组件很多地方要用-第一次记得在main.js中引入（主页文章有）// 输入框树形组件// install全局引入 vue中一个方法// 第1个参数是标签名称，第2个参数是一个选项对象// 注册组件3.main.js引入样式。
vue实战：构建通用的下拉树组件
希望看完文章的你能够带着答案离开。
12-11 1万+
vue实战：构建通用的下拉树组件
Vue Treeselect
NMZLduiduidui的博客
04-25 7303
<el-col :span="24"> <el-form-item label="归属部门" prop="deptIds"> <treeselect :show-count="true" :disable-branch-nodes="true" :limit="1" :fl...
element-ui出的treeselect下拉树组件基本使用，以及只能选择叶子节点的功能，给节点添加按钮操作
weixin_63896561的博客
03-19 5285
disable-branch-nodes属性是禁用节点属性（针对需求1这个属性一定要设置，否则不生效）需求1：treeselect下拉树组件只能选择叶子节点，其他父节点均为点击展开功能（不选中）v-model绑定的值要设为null,不能设为'' ，否则会回显unknown。需要用到treeselect组件的插槽：slot="option-label"，插槽slot=“value-label” 是输入框回显的值，插槽slot=“option-label” 是下拉框的值，@select为选中某个节点时触发，
Vue Treeselect树形下拉框的使用
Vivien_CC的博客
11-02 7967
1、绑值， :value=“form.astdeptId”，主要绑的就是id或者code，通过id或code找到对应的label回显。3、append-to-body="true"这个最好加上，可能会遇到下拉的弹窗打不开或者只有一点点高的情况。，0，等，因为会出现unknown，并且当选择了值以后，会出现选中的值后面会拼上unknown。treeselect 绑定的值需要与options输出的id相对应，若是空值，请不要给空。4、normalizer就是把我们自己的后端返的数据格式按树插件需要的格式转换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值