这些项目和库可以分为 3 类： 用户界面（1~19） Vue.js工具（20~36） 项目（37~45） 这是一个极具权威性的表单，精确汇总了 2018 年 1-12 月期间发布的最佳 Vue.js 开源项目...Vuetify Star 数：16672 GitHub：https://github.com/vuetifyjs/vuetify 介绍：Vue.js 2 的 Material 组件框架（1.0 版本）...扩展开发工具。...Tiptap Star 数：2790 GitHub：https://github.com/scrumpy/tiptap 介绍：Vue.js 的富文本编辑器。 ? Tiptap 24....Vue-hooks Star 数：1148 GitHub：https://github.com/yyx990803/vue-hooks 介绍：在 Vue 中实现试验的 React 钩子。 ?
关于 Element Tiptap Editor Element Tiptap Editor 是一个在 web 开发领域“所见即所得”的富文本编辑器。...它基于 tiptap 编辑器和 element-ui 开发，相比很多富文本编辑器，Element Tiptap Editor 使用易上手，对开发者友好，而且可扩展性强，设计简洁。...Element Tiptap Editor 技术特性 操作按钮等组件使用 element-ui 组件，整体样式协调美观 有许多开箱即用的 extension（编辑器扩展） 支持 markdown...扩展 内置的功能都是基础的文字排版，如果要实现较为复杂的功能，比如插入特定结构或格式的内容（插入一篇文章的封面和摘要），就需要根据 Tiptap 提供的事件来处理。 比如，Init事件。...}, }, }, Element Tiptap Editor 还可以自定义扩展菜单功能。更多详细内容请查阅官方文档。
富文本编辑器作为直接与用户交互的内容输入生产工具，对大家的项目来说非常重要。选不好，配置不好，直接影响产品质感和用户体验，所以说在选择编辑器方面花点时间是值得的。...排出复杂又美观文章样式，代码高亮等都是基础功能。它甚至有点像在线版的 Word，可以在顶部的各种菜单中找到你要的功能。...它基于 Prosemirror 进行扩展开发，是一款无头(headerless)富文本编辑器，默认情况下，它没有任何 UI 样式，你完全可以自己来配置想要的 UI，不需要重写 class，也不需要 important...tiptap 功能非常强大，功能插件丰富。但它比其他编辑器更棒的地方在于多人在线实时编辑。类似于谷歌文档那种效果，所有使用者在同一个页面彼此能看到对方的光标位置和名字，大家同时在线协同编辑。...Quill - 易扩展、轻量级二开、代码高亮好用 Quill 也是众多富文本编辑器中的佼佼者，它相对于其他编辑器更容易设置，有丰富便捷的 API，非常好的扩展性，轻量级可二开的编辑框，很适合特殊场景的定制开发
所以，无论你的技术栈是Vue，还是React，使用Tiptap都不用太过于在选型上纠结。Tiptap 的核心思路是通过插件系统提供丰富的功能，使得开发者可以根据需求定制编辑器的功能和样式。...这里极有可能是为了后续更好做扩展或者解耦。 整个Tiptap的架构图，我们可以参考如下 Document Model：ProseMirror 提供了一个灵活的文档模型，用于表示富文本编辑器中的内容。...Tiptap 的 Core 模块使用 ProseMirror 的文档模型来表示和操作编辑器中的内容。...当你将扩展添加到编辑器时，编辑器会自动加载和应用这些 API。以下是一些主要的 API 和它们的原理： 快捷键：在扩展中定义 inputRules 或 keymap 属性，可以添加快捷键。...这些处理函数用于处理编辑器的事件和事务。 以下是用户操作时，扩展Extension于编辑器Editor的交互序列图，当然隐藏了诸多细节，但是不妨碍我们理解一个扩展在整个编辑过程中扮演的角色。
---- Github https://github.com/scrumpy/tiptap 为什么使用tiptap？ 市面上有不少富文本编辑器，但大多数可能并不能满足你的需求。...tiptap是基于Prosemirror进行扩展开发的没有很多公司在Prosemirror（富文本工具包）基础上进行开发。 无渲染要如何理解？...使用无渲染组件（函数式组件），你将（几乎）完全控制标记和样式。菜单的外观或在DOM中的显示位置。这完全取决于使用者。...它通过实现WYSIWYG样式的编辑界面来实现此目的，以使文档比纯HTML更加受约束和结构化。可以自定义编辑器创建的文档的形状和结构，并根据应用程序的需要对其进行定制。 ?...https://github.com/prosemirror 总结 tiptap是一个相当不错的富文本编辑器，其无渲染特性以及可实现的协同编辑让其扩展更加方便！enjoy it！
使用无渲染组件，您将(几乎)完全控制标记和样式。 我不想告诉您菜单的外观或在DOM中的显示位置。 这完全取决于您。 Adam Wathan也有一篇关于无渲染组件的好文章 。 数据如何存储在后台？...同时使用两者时， content位置将被忽略。 watchDoc Boolean true 如果设置为true则每当doc更改时内容就会更新。...extensions Array [] 编辑器使用的扩展名列表。 这可以是Nodes ， Marks或Plugins 。...默认情况下，编辑器仅支持段落。 其他节点和标记可用作扩展 。 有一个名为tiptap-extensions的程序包，其中包含最基本的节点，标记和插件。...标记用于向内嵌内容(如强标签或链接)添加额外的样式或其他信息。
冬日暖阳 前言 今天在写前端的时候，就是遇到一个问题。一开始我以为用textarea去掉角标，实现自动增长，然后就可以了。谁知道它还得加样式，加粗、斜体，老师在最开始给的设计稿上根本没有。...后来就去搞这个富文本编辑器。感觉前端也不容易，要学习的东西真的蛮多。 ---- 功能需求是这样的 就是选中文章，给它加粗，加斜体，加样式，并且选中的时候能够在上面弹出一个小菜单。...为了这个气泡菜单，真的找了很多富文本编辑器，最后翻到个element-tiptap，看到样式上有这个。...一、Element-tiptap富文本编辑器介绍 它易于使用，对开发人员友好，完全可扩展，设计简洁。 用它的话，主要是和element适配度高，然后我就想用他了，使用element-ui组件。...大家好，我是博主宁在春：主页 一名喜欢文艺却踏上编程这条道路的小青年。 希望：我们，待别日相见时，都已有所成。 今天看能不能实现自定义菜单，正在努力中…
什么是 headerless Tiptap 是一款无头编辑器，它没有提供任何 UI 样式，你完全可以自由地构建任何你想要的 UI。不需要重写任何 class，不需要 !...这时他偶然发现了很多国外大厂都在使用的 ProseMirror，于是决定自己撸起袖子上，在它的基础上自建一个支持 Vue，易于扩展，且不依赖 jQuery 这类过时插件的编辑器轮子，Tiptap 应运而生...，可能因为 Vue2 本身也对 TS 不友好 虽然提供了许多开箱即用的扩展，但是它们的功能都相对简单，比如图片只能插入，不能修改尺寸和对齐，要用在真正的场景中，还需要做一定的开发，「没有真正的开箱即用」...但是使用 Tiptap，你只需要几分钟就能上手，而且也提供了大量的扩展供你选择和参考，同时在你需要的时候，「仍然可以使用原生的 ProseMirror API」。...目前我正在将其升级到 Tiptap2 和 Vue3。 目前，Tiptap 可能是社区中唯一一个支持 Vue2 和 3，能够自己写插件扩展，又支持协同的编辑器了。
今天整理了五款Vue日历组件，先收藏，万一用得上呢~ Vue Heatmap Vue Heatmap是一个基于Vue.js的Github样式的日历热图，可使用d3.js 库动态呈现类似Github贡献图的日历热图...安装使用 # 安装 npm i vuejs-heatmap yarn add vuejs-heatmap # 使用 Github地址...它是基于原生JS开发，无第三方依赖，轻量、高性能、内存使用量少、样式好以及可伸缩性高，还支持日期选择器、日期范围、多个日历、模式日历等。...Dayspan Vuetify是一个使用Vuetify开发的计划和日历组件，是可视化DaySpan日历和时间表的集合，提供在专业日历应用程序中的所有功能。...Kalendar有Vue，React和Angular等多个版本，这是此插件的Vue版本。
3.Vuetify 优点：时间选择器是时钟样式，比较有特色。中文文档 缺点：种类不如前面全 ? 地址：https://vuetifyjs.com/zh-Hans/ ? ? ? ? ? ? ?...7.Vant 优点：移动端界面，轻量化，基本涵盖移动端交互的ui，和微信样式很像 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?...26.vue-quill-editor ★149 - 基于Quill适用于Vue2的富文本编辑器 ? 27.vue-chartkick ★22 - VueJS一行代码实现优美图表 ?...29.vue-simplemde ★35 - VueJS的Markdown编辑器组件 ? 30.vuwe ★107 - 基于微信WeUI所开发的专用于Vue2的组件库 ?...6.Vuepack (v 3.0) 一个使用Vue 2，Vuex，Vue-router和Webpack 2（甚至是Electron）的新潮种子项目。 [Github star：2077]。
vue-chartjs Chart.js库的vue实现，可以完成网页中的图表显示。...https://baianat.github.io/vee-validate/ eslint-plugin-vue vue的文法校验工具，可以快速找出代码、指令、样式单中的问题，同时还可以集成到VSCode...，可以和Vuex状态管理配合使用。...https://github.com/charliekassel/vuejs-datepicker vue-md-editor vue的markdown编辑器。...https://router.vuejs.org/ Vuetify vue的UI/UX框架，除Bootstrap外的选择。
库 vuetify：为移动而生的Vue JS 2组件框架 vonic：快速构建移动端单页应用 eme：优雅的Markdown编辑器 vue-multiselect：Vue.js选择框解决方案...vue-instant：轻松创建自动提示的自定义搜索控件 vue-dragging：使元素可以拖拽 vue-slider-component：在vue1和vue2中使用滑块 vue2-loading-bar...当元素在页面上可见或隐藏时检测 vue-ts-loader：在Vue装载机检查脚本 vue-pagination-2：简单通用的分页组件 vuex-i18n：定位插件 Vue.resize：检测...-VueJS：使用移动框架的示例 cnode-vue：基于vue和vue-router构建的cnodejs web网站SPA vue-cli-multipage-bootstrap：将vue官方在线示例整合到组件中...懒加载图片 vue-lazyloadImg – 图片懒加载插件 vue-bus – VueJS的事件总线 vue-observe-visibility – 当元素在页面上可见或隐藏时检测 vue-notifications
还没观看的同学可以和大家一起来一波图文 Reaction，看过的同学也可以再梳理一遍重点内容，废话少说，让我们开始吧！...比如我们有 Comp.vue 和 App.vue 两个组件。 在 setup 下，App 引入 Comp 组件后可以直接使用，无需注册。...当然，也会和其他的编辑器进行官方合作，提供支持。 不再支持 IE11 微软刚刚发布声明，IE11 将在 2022 年 6 月 retire，可见其推动 IE 用户改用 Edge 的决心。...并提供了详尽的 step by step 的流程vue-hackernews-2.0[16] 3.2 因为上面的兼容版移到了 3.1，所以原有的 3.1 内容将会移到 3.2，不过预计也会很快发布，具体的细节会在发布时披露...，他在坚持自己热爱的事情，欢迎你加入前端食堂，和这个男人一起开心的变胖～
该产品具有CMS的所有主要和高级功能： ·可定制的分析仪表板与网站性能; ·网站内容编辑页面； ·内置博客； ·HTML和Markdown 编辑器; ·文件管理器； ·用户角色管理。...该产品使用简单的ORM、模块化架构和包管理构建。还有一个内置的调试工具栏，可以帮助开发人员监视性能、路由、数据库查询和调试内部系统事件、扩展甚至可以添加自己的功能。...另外，也可以使用CLI执行系统更新、安装和卸载扩展和主题，以及直接从终端清除缓存。 该产品有一个强大的贡献指南，团队欢迎人们来修复错误，翻译或扩展CMS的功能。...在VuePress 中你用Markdown 写内容，然后转换成预渲染的静态HTML文件。 该项目有一个组织良好的捐款指南，工作流程透明。它还有很好的问题管理功能。...10 Eagle.js Eagle. js 是使用Vue构建的强大、灵活、独特的幻灯片显示系统。它允许你在演示文稿中创建易于重用的组件、幻灯片和样式。
2.4 如何在微信小程序中使用 vuetify？ 2.5 如何快速开始使用 vuetify？...和Bulma开发 Vue-Beauty 基于 vue.js 和 ant-design样式的PC端UI组件库 Vuetify 一个material design vue 组件库 vue-material...组件，不需要 jQuery 和 Bootstrap 的 JS 文件 vonic 基于 vue.js 和 ionic 样式的UI框架，用于快速构建移动端单页应用。...Vuetify 是 Vue.js 的一个UI组件库，自2016年以来一直在积极开发。提供使用谷歌 Material Design 设计指南构建现代网站所需的一切 UI 能力。...vuetify 为移动设备而生。所有的 vuetify 组件都是专为移动设备设计。应用程序可以轻松在不同的方向和屏幕尺寸间转换。从桌面，到平板、手机，都可以。
组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和...★701 - 无限的内容循环 vue-chartjs ★694 - vue中的Chartjs的封装 vue-carbon ★684 - 基于 vue 开发MD风格的移动端 vue-syntax-highlight...- VueJS的双向下拉刷新组件 vue-slider-component ★202 - 在vue1和vue2中使用滑块 vue-chat ★200 - Vue全家桶+Socket.io+Express...- vue的Bootstrap样式组件 vue-animate ★106 - 跨浏览器CSS3动画库 vue-property-decorator ★104 - VueJS和属性Decorator vue-aplayer...★44 - vue中添加用于配合媒体查询的方法 vue-observe-visibility ★42 - 当元素在页面上可见或隐藏时检测 vue-lazy-component ★38 - 懒加载组件或者元素的
Github Star数：25K 官网地址：https://vuepress.vuejs.org/zh/ Vuegg 低代码开发是一种可视化应用开发方法,使用拖放式组件和模型驱动逻辑来创建 Web...Vuegg通过将组件直接拖放到可视化编辑器，然后通过简单的交互调整大小，最终通过拖拉拽的方式构建一个 Vue.js 项目。将设计和原型制作合并为一个过程。...当你通过拖拉拽设计一个满意的界面时，该前端的代码也帮你写好了，你只需下载代码即可。...它的优点是将原来几个配置文件要完成的内容，都整合在了一个nuxt.config.js，封装与扩展性完美的契合。...用户可以轻松地创建一个静态生成或服务器渲染的快速网站，并部署到各种托管服务中。
ref=learnvue.co 顾名思义，Vue Light Bootstrap Dashboard Pro是使用 Bootstrap 4和 VueJS构建的。...我真正喜欢的 Vue Light Bootstrap 的 一个原因是，我们可以在各种颜色，背景图像和其他样式之间自定义边栏。 此功能允许开发人员根据自己的特定项目需求来定制。...代码中已经添加了许多Vue库，例如vue-router和Vuex。 尽管它可能不是“现成的”，但它确实为开发人员在仪表板的布局，设计和结构上提供了额外的灵活性。...它建立在Element UI库的基础之上，Github上的有63K颗星，非常受欢迎。 对于免费工具，Vue Element Admin中包含大量的组件，页面和功能。...拥有200多个可以使用SASS样式进行修改的组件，使用此模板可以轻松进行开发。 主要特点： 200 +的元素 响应式 Bootstrap 仪表板 17个自定义插件 优秀的文档 14.
本文总结了一些最值得关注的工具和库，相信你迟早会用在自己的 Vue.js 项目中。同类文章经常只会列举一些 UI 组件库，而本文涉及的范围更广，探讨了 Vue 生态系统中的一系列工具、库和插件。...借助 Bootstrap Vue，你可以使用 Vue.js 和世界上最受欢迎的前端 CSS 库——Bootstrap v4 在 Web 上构建响应式、移动优先和 ARIA 可访问的项目。...这主要归功于它的可扩展插件系统。这意味着社区可以构建和共享可复用的插件以满足常见需求。...VuePress 是 Vue 生态系统中的另一大重头戏。...它有一个默认主题（适用于技术文档），但你也可以构建自定义主题或使用社区中的预制主题。
Nuxt 3 Vuetify Quasar Element Plus Ant Design Vue 用户体验 持续探索中： 新的构建工具 更棒的语法 IDE/TS 支持 构建工具 Vite，不用说了，今年的明星项目...和 Vue-CLI 更加相似的体验 基于 ESM 的 HMR 热更新 ESBuild 提供依赖预构建 Rollup 兼容的插件接口 内置 SSR 支持 更多更多…… 可以扩展阅读笔者之前写的浅谈 Vite...它的独特之处在于： 利用 SPA 的开发体验来定制用户主题 在 Markdown 里自由加入动态组件 自动消除静态内容的“双重负载” 利用 VitePress 这个平台，探索未来 SSR/SSG 优化（...更好的 IDE/TS 支持 多个探索中的项目 Vetur VueDX Volar 获得了： 类型检查，语法提示和 SFC templates 的自动重构 接下来： 把这些努力整合成更推荐的链路 提供 CLI...通过内部设计来支持其他编辑器，通过 LSP（Language Service Protocol） 未来 我们在 Vue3 中放弃了 IE11。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
