首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

16 个优秀的 Vue 开源项目

这个项目有一个清晰的路线图,你可以直接在Github上看到。由于该项目是相当新的,仍在进行中的工作没有贡献指南,但你可以自由的打开任何问题和公关。...虽然它只有40多个组件,但它为你提供了随时可用的移动优先和响应式的UI组件。...它也是模块化的,所以你可以只使用你的apage所需要的模块简而言之,Nu xt 将您从构建和优化您的apage的工作中拯救出来Nuxt. js 具有模块化的架构,有50多个模块可供选择。...16 VeeValidate VeeValidate 是一个基于模板的Vue. js 验证框架,允许你验证输入和显示错误。 由于它是基于模板的,你只需要为每个输入指定当值更改时应该使用哪种验证器。...VeeValidate 处理表单验证的主要痛点,并以最灵活的方式处理它们: ·能够为你的用户设计复杂的用户体验; ·大多数常见的验证是内置的; ·跨领域验证; ·用于增强窗体的可访问性和样式的实用程序;

4.4K20

分享 16 个顶尖 Vue 开源项目,助你提升技术能力

处理问题的工作应组织良好,以便操作人员知道首先解决哪些问题; 项目是否有路线图?路线图帮助贡献者选择他们将首先开发的特性; Github上的星星数。这一标准在一定程度上反映了项目的质量; 成熟度。...这个项目有一个清晰的路线图,你可以直接在Github上看到。由于该项目是相当新的,仍在进行中的工作没有贡献指南,但你可以自由的打开任何问题和公关。...它也是模块化的,所以你可以只使用你的apage所需要的模块简而言之,Nu xt 将您从构建和优化您的apage的工作中拯救出来Nuxt. js 具有模块化的架构,有50多个模块可供选择。...16 VeeValidate VeeValidate 是一个基于模板的Vue. js 验证框架,允许你验证输入和显示错误。 由于它是基于模板的,你只需要为每个输入指定当值更改时应该使用哪种验证器。...VeeValidate 处理表单验证的主要痛点,并以最灵活的方式处理它们: ·能够为你的用户设计复杂的用户体验; ·大多数常见的验证是内置的; ·跨领域验证; ·用于增强窗体的可访问性和样式的实用程序;

4.6K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    视频上云网络穿透网络映射服务EasyNTS前端组织添加页面出现Vue冲突怎么解决?

    近期TSINGSEE团队在开发EasyNTS组织添加功能时,在组织添加页面中出现报错:[Vue warn]: The computed property “fields” is already defined...分析问题 经过分析发现,发现这是一个Vue冲突的问题。只要不写表单就没有报错,所以这明显和表单验证有关系。...Vue.use(VeeValidate, { locale: "zh_CN", errorBagName: 'errorBags', fieldsBagName: 'fieldBags',...required: field => `${field} 不能为空`, confirmed: (field, targetField) => `${field} 和 ${targetField} 不匹配...关于EasyNTS EasyNTS目前实现了硬件设备的接入与管控、动态组网、远程运维、文件传输、远程指令调用等功能,从终端到云端,形成了一整套的上云网关解决方案,极大地解决现场无固定IP、端口不开放、系统权限不开放等问题

    85320

    写表单你还在复制粘贴吗?推荐你使用基于Vant-UI二次封装的数据驱动式表单自动生成组件

    前言 在使用Vue写移动端开发的时候,难免会遇到需要写很多的表单,所以我在现在的项目里面集成了有赞的Vant-ui组件库,但是感觉Vant-ui对于表单组件的调用方式有点繁琐,实在不愿意去干这么一样的事情...,就封装了一个基于Vant-ui的数据驱动式表单自动生成组件。...组件的调用方式采取json配置的形式,具体参数见model数据说明 校验规则已经集成VeeValidate插件,也可以自定义扩展规则,更多资料: https://logaretm.github.io/vee-validate...object{event,formModel} slots 组件可接受多个slot,用于替换当前行的表单组件,会为该slot传入该组件的原始数据,每个slot的name为当前行的key 注:该slot...,其它的基本不用管,最后直接取填完表单后的数据就可以了,减少了不少繁琐,不用到处复制粘贴,还可以自己去更好的扩展自己想要的功能。

    1.9K20

    React 中后台系统多页签实现

    在中后台管理类系统中,多页签的需求非常普遍,用户常常需要在多个页签内跳转,比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写。...我的项目也遇到了同样的问题,在 2019 年左右做了技术调研和选型,最终选择了 react-router-cache-route,并在此基础上实现了多页签的需求,并稳定运行了 2 年的时间。...而 Vue 使用 keep-alive 即可实现多页签功能,如下图的 vue-element-admin 就是典型的多页签案例。...我们在多页签的迭代中增加了相同组件多开功能,这个场景比较常见,比如列表页点击链接跳转到表单页,可以同时打开多个表单,这样在不使用 Redux 是没有什么问题,但是一旦数据存在 Redux 中,多开组件就会有问题...react-router-cache-route (推荐) React Activation (和上面的工具同一个作者,Vue 中功能在 React 中的实现,配合 babel 预编译实现更稳定的 KeepAlive

    3.5K20

    【实战】1096- React 中后台系统多页签实现

    在中后台管理类系统中,多页签的需求非常普遍,用户常常需要在多个页签内跳转,比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写。...我的项目也遇到了同样的问题,在 2019 年左右做了技术调研和选型,最终选择了 react-router-cache-route,并在此基础上实现了多页签的需求,并稳定运行了 2 年的时间。...而 Vue 使用 keep-alive 即可实现多页签功能,如下图的 vue-element-admin 就是典型的多页签案例。...我们在多页签的迭代中增加了相同组件多开功能,这个场景比较常见,比如列表页点击链接跳转到表单页,可以同时打开多个表单,这样在不使用 Redux 是没有什么问题,但是一旦数据存在 Redux 中,多开组件就会有问题...react-router-cache-route (推荐) React Activation (和上面的工具同一个作者,Vue 中功能在 React 中的实现,配合 babel 预编译实现更稳定的 KeepAlive

    2.6K10

    2021,17个 最流行的 Vue 插件

    Vue 被一个健康的插件和包的生态系统所加强,使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架,所以有一个不断增长的插件和包库,你可以在项目中使用。...本文列举了用于Vue 2和Vue 3的 15个 流行的 Vue 插件。...你是否曾纠结于如何让应用在视觉上看起来更吸引人?Vuetify是一个基于Material Design的UI库,支持谷歌和Android的设计语言。...NuxtJS Nuxt 基于一个强大的模块化架构。你可以从 50 多个模块中进行选择,让你的开发变得更快、更简单。...为了确保通过表单从用户那里收集正确类型的数据,有必要验证表单,以确保用户输入符合预期的模式。VeeValidate是一个可以将这一层功能添加到任何表单组件的包。

    4.4K10

    做低代码引擎有多难?OneCode五个版本心路历程

    一,V1.0 SPA单页应用 ​ 第一个表单SPA应用 不管是现在大名鼎鼎的React还是国内风光一时的VUE,在1.0的哪个时代都在应用同一个概念 “SPA单页应用程序”。...OneCode 1.0 也出生在这个年代,CodeBee团队在多年工作流表单设计器的经验基础上。废弃了旧有的ext模板渲染模式,将组件进行全新的SPA模式封装。...但随着团队的技术进步,产品上线后SPA在应用上带来的新技术体验,让OneCode 1.0逐步的向主流的Vue ,React靠拢。团队的技术欲望也不再满足于自定义表单,列表这样单一的应用。...但实质上却是技术原理上本源上的跳跃,单页应用时所有应用都在一个环境内,可以直接调用,而相关的可视化读取也是静态结构。...JavaScript单页环境这个小魔鬼也被关在了单页类结构这个沙箱里,多个SPA终于可以相互照应和平相处了。

    1.7K10

    干货 | 已配置4000+页面,携程前端组件化探索之“乐高”运营系统

    ,才能在有限的开发资源下保证这么多的页面和配置需求能快速保质的上线,更重要的是能够持续配置运营。...目前市场部常规运营活动能够通过组件组合的方式快速配置生成H5页面,平台支持多种方式的领券活动,抽奖活动,产品展示等以及多个裂变类活动(投票,拼团等)的运营配置。...乐高将这些组件配置引入,并给这些组件配置所需表单属性,它们就成了乐高组件的一员。渲染组件时用vue.runtime.js 运行时的render方法进行渲染。...乐高在渲染这种组件时会通过立即执行函数将同一个页面上同一种snippets组件的作用域变量分发,使得各个组件拥有自己的配置数据,这种方式也能做到一次开发,多次配置使用。 ?...这样的话,基于vue开发的组件不仅能在乐高平台中由运营同学自由配置,也能在我们开发其他活动页面的时候由开发同学根据所需模块引入,而且,运营还是能自由配置组件所有属性,无疑节省了很多的人力,提升活动开发的效率

    2.2K30

    Vue核心与实践(一)

    点击上一页下一页来回切换数组中的图片 实现思路: 1.数组存储图片路径 [‘url1’,‘url2’,‘url3’,…] 2.可以准备个下标index 去数组中取图片地址。...3.通过v-bind给src绑定当前的图片地址 4.点击上一页下一页只需要修改下标的值即可 5.当展示第一张的时候,上一页按钮应该隐藏。...展示最后一张的时候,下一页按钮应该隐藏 上一页 </div...或 数字类型 key 的值必须具有唯一性 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应) 十六、双向绑定指令 所谓双向绑定就是: 数据改变后,呈现的页面结果会更新...:**使用双向绑定实现以下需求 点击登录按钮获取表单中的内容 点击重置按钮清空表单中的内容 账户:

    8310

    【Vue】day01-Vue基础入门

    点击上一页下一页来回切换数组中的图片 实现思路: 1.数组存储图片路径 ['url1','url2','url3',...] 2.可以准备个下标index 去数组中取图片地址。...3.通过v-bind给src绑定当前的图片地址 4.点击上一页下一页只需要修改下标的值即可 5.当展示第一张的时候,上一页按钮应该隐藏。...展示最后一张的时候,下一页按钮应该隐藏 上一页 </div...或 数字类型 key 的值必须具有唯一性 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应) 十六、双向绑定指令 所谓双向绑定就是: 数据改变后...="变量" 需求:使用双向绑定实现以下需求 点击登录按钮获取表单中的内容 点击重置按钮清空表单中的内容 账户:

    30350

    【免费大屏版】JeecgBoot v3.7.2 大屏版发布,开源低代码平台

    JeecgBoot引领低代码开发模式(OnlineCoding-> 代码生成-> 手工MERGE), 帮助解决Java项目70%的重复工作,让开发更多关注业务。...生成erp表单时,当region代码是81和82开头,也就是香港澳门区域时,JAreaLinkage地址组件显示不完整 · Issue #7290标签页样式异常 · Issue #7345仪表盘无法读取...如何与vue3版本的子项目 进行微前端qiankun集成?...引领低代码开发模式(OnlineCoding-> 代码生成器 -> 手工MERGE),低代码开发同时又支持灵活编码, 可以帮助解决Java项目70%的重复工作,让开发更多关注业务。...);数据权限(精细化数据权限控制,控制到行级,列表级,表单字段级,实现不同人看不同数据,不同人对同一个页面操作不同字段在线配置报表(无需编码,通过在线配置方式,实现曲线图,柱状图,数据等报表)页面校验自动生成

    9810

    谈谈我这些年对前端框架的理解

    最早的时候页面是服务端渲染的,也就是 PHP、JSP 那些技术,服务端通过模版引擎填充数据,返回生成的 html,交给浏览器渲染。那时候表单会同步提交,服务端返回结果页面的 html。...我一直习惯把网页分为物理层和逻辑层,dom 就算是物理层,jquery 是操作 dom 的一系列工具函数,也是工作在物理层。...而 react 的 jsx 本来就是和 js 同一个上下文,结合 typescript 就很自然。 所以 vue template 和 react jsx 各有优缺点。...变成了循环,那么就可以按照时间片分段,让 vdom 的生成不再阻塞页面渲染,这就像操作系统对多个进程的分时调度一样。...为了体验和原生更接近,现在基本都是不刷新页面的单页应用,都是从服务端取数据然后驱动 dom 变化的 浏览器渲染(csr)方案。但对于一些低端机,仍然需要服务端渲染(ssr)的方案。

    1K10

    谈谈我这些年对前端框架的理解

    最早的时候页面是服务端渲染的,也就是 PHP、JSP 那些技术,服务端通过模版引擎填充数据,返回生成的 html,交给浏览器渲染。那时候表单会同步提交,服务端返回结果页面的 html。...我一直习惯把网页分为物理层和逻辑层,dom 就算是物理层,jquery 是操作 dom 的一系列工具函数,也是工作在物理层。...而 react 的 jsx 本来就是和 js 同一个上下文,结合 typescript 就很自然。 所以 vue template 和 react jsx 各有优缺点。...变成了循环,那么就可以按照时间片分段,让 vdom 的生成不再阻塞页面渲染,这就像操作系统对多个进程的分时调度一样。...为了体验和原生更接近,现在基本都是不刷新页面的单页应用,都是从服务端取数据然后驱动 dom 变化的 浏览器渲染(csr)方案。但对于一些低端机,仍然需要服务端渲染(ssr)的方案。

    92420

    Naive Ui Admin前端集成框架

    简介 Naive Ui Admin 是基于 vue3,vite2,TypeScript,搭配使用 Naive Ui 组件库形成一套开箱即用的中后台前端解决方案,Naive Ui Admin 遵守 Naive...Ui 组件设计和开发约定,风格统一,全面的组件和便捷的工具会让您信手拈来,如鱼得水,更多功能在不停开发中。...特性 最新技术栈:使用 Vue3/vite2 等前端前沿技术开发 TypeScript: 应用程序级 JavaScript 的语言 主题:可配置的主题 Mock 数据 内置 Mock 数据方案 权限 内置完善的动态路由权限生成方案...组件 二次封装了多个常用的组件 页面功能 系统看板 主控台 监控页 工作台 表单页面 列表页面 异常页面 结果页面 设置页面 系统设置 菜单权限 角色权限 页面组件 ProTable...测试相关 docs 文档/注释 chore 依赖更新/脚手架配置修改等 workflow 工作流改进 ci 持续集成 types 类型定义文件更改 wip 开发中 浏览器支持 本地开发推荐使用Chrome

    1.6K30

    页面可视化配置搭建工具技术要点

    活动页面开发之痛 活动页面特点 前端业务中, 经常需要开发产品介绍页/营销页/活动页/图片展示页等页面. 这类需求有以下几个特点: 页面类似: 页面布局和业务逻辑较固定....如果为每个组件都编写一个表单页面, 工作量较大; 对于复杂的配置项, 表单页面的编写工作量可能会大于页面组件的开发工作量. 需要重点考虑提供配置表单的方式....图片来源: https://github.com/jaweii/Vue-Layout 不嵌套的前端框架组件 可以想象, 组件的嵌套会加大页面可视化搭建工具的架构设计和开发难度....不嵌套的组件 在编辑自由度的选择上, 选用不嵌套的组件.各组件铺满页面宽度, 在页面高度方向顺序排列.解决组件嵌套带来的数据流问题. 不嵌套的组件如下图各个红框框起来的部分所示. ?...目前已经支持 Vue, React, 和 Omi, 理论上可以支持任意前端框架. ? image 框架特点 开源页面可视化搭建框架. 自定义页面可配置字段. 组件动态增减, 组件拖拽.

    2.8K30

    Angular和Vue.js 深度对比

    轻便 由于 Vue 主要关注于 ViewModel 或双向数据绑定,因此 Vue 很轻便。Vue 也具有十分基础的文档。...双向绑定 Vue 提供了 v-model 指令(用于更新用户输入事件的数据),使得在表单输入和结构元素上实现双向绑定变得很容易。它可以选择正确的方式来更新输入类型相关的元素。 5....Deep Linking 由于 Angular 主要用于制作单页应用程序,因此必须利用 Deep Linking 功能才能在同一页面上加载子模板。...Vue 则更加宽泛,Vue 为创建应用程序提供了模块化,灵活的解决方案。 很多时候,Vue 被认为是一个库而不是框架。默认情况下,Vue 不包含路由器,HTTP 请求服务等。...对于开发人员创建具有多个组件和复杂需求的 Web 应用程序,Angular 也同样适用。当你选择Angular 时,本地开发人员会发现更容易理解应用程序功能和编码结构。

    5.4K30
    领券