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

20 个新的且值得关注的 Vue 开源项目

上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。...Vue 相对不于 React 的一个优点是它易于理解和学习,且在国内占大多数。咱们可以在 Vue 的帮助下创建任何 Web 应用程序。...其中一个很大的优点是使用了更漂亮的代码格式化器,它可以在提交到Git之前自动排列代码。...GitHub Stars: 2k 当咱们开发网站或者 APP 时,遇到内容过多加载速度慢时,会导致用户打开页面有大量空白页,vue-content-loader正是解决这个问题的一个组件,使加载内容之前生成一个...GitHub Stars: 1.3k 在图片中,咱们可以看到非常漂亮的图表。这个项目使任何数据都更具可读性,更容易理解和解释。它允许咱们在任何数据集中轻松地检测趋势和模式。

1.4K20

20 个值得学习的 Vue 开源项目

译者:前端小智 作者:Nastassia Ovchinnikova 来源:flatlogic.com Vue 相对不于 React 的一个优点是它易于理解和学习,且在国内占大多数。...这是一种组织良好的工具,对于任何web开发团队来说,它的命名都很容易理解。其中一个很大的优点是使用了更漂亮的代码格式化器,它可以在提交到Git之前自动排列代码。...当咱们开发网站或者 APP 时,遇到内容过多加载速度慢时,会导致用户打开页面有大量空白页,vue-content-loader正是解决这个问题的一个组件,使加载内容之前生成一个dom模板,提高用户体验。...在图片中,咱们可以看到非常漂亮的图表。这个项目使任何数据都更具可读性,更容易理解和解释。它允许咱们在任何数据集中轻松地检测趋势和模式。...这个UI库有一个标准的功能,但是最酷的是它没有额外的样式。你可以让设计尽可能的个性化,应用所有的需求。只需编写需要的样式,将其添加到项目中,并包含需要的尽可能多的组件。

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

    前端开发:如何写一手漂亮的 Vue

    目前犹身为前端开发者,且在使用 Vue,那么就有了此文;这不仅是纪录或分享,也是在漫漫之路上下求索,更希望能探讨和指点,以资见识,提升其效。...相信,接下来的很长时间里,都须对这几方面加以学习、探索,然后加以利用。 如何漂亮使用-Vue-之实战组件篇)如何漂亮使用 Vue 之实战组件篇 Vue 一大特色是用嵌套的组件树来描述用户界面。...另外还当学习 Vue 本身所提供的优化,像[路由懒加载], 即:结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载,使得该组件访问时才加载...如何漂亮使用-Vue-之Webpack篇)如何漂亮使用 Vue 之Webpack篇 前文提到,推荐使用Vue-cli,它已然帮助我们贴心的配置好了 Webpack 相关。.../node_modules/vue/dist/vue.runtime.common.js 如何漂亮使用 Vue 之工作流篇 “轻功不代表武功,但速度决定了你我的距离。”——白凤(秦时明月)。

    1.2K20

    20多个好用的 Vue 组件库,请查收!

    Vue Tables 2旨在为开发者提供一个功能齐全的工具集,以便用 Vue 创建漂亮而实用的数据表格。数百个商业软件应用正在使用它。...Vue Easytable 地址:https://github.com/huangshuwe... vue-easytable是我遇到过的最强大的Vue表格组件之一。...它提供轻巧、简单和漂亮的吐司提示。它有内置的Nuxt支持。而且,它还支持新的Composition API和Vue 3。我们还可以J使用SX来开发自定义组件,提供更加灵活的功能。...Feather 是一套面向设计师和开发者的开源图标库,是一个简单漂亮的开源图标库。 每个图标都设计在一个24×24的网格上,强调简单,一致性和易读性。...此外,这个库是一个Vue单文件组件的集合,用于渲染Material Design图标。此外,它还包括一些CSS,有助于使图标的缩放更容易一些。

    7.6K10

    前端开发工具总结

    - 另外一款搭建PC网页的UI库,越弄越好了 主要说上面一些,具体的一些vue插件可以从下面这个链接找: Vue插件集合 React 因为平时用react用的比较少,希望小伙伴在评论中进行补充,然后我再添加进来...对于能持续学习的童鞋,这是个美好的时代 antd - 蚂蚁开源的react的UI库,用起来很舒服,不亏是用户体验部出的。目前市面上的UI库,我感觉这个说第二,没有敢说第一的吧。...小程序 WePY - 支持组件化的小程序开发框架 mpvue - 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系,目前支持多端小程序,如:微信,支付宝,百度...,各种旅行漂亮的照片,还有他的个人介绍 翁天信博客 - 他的官网中可以找到他博客的地址,但是有点不显眼,所以就列出来了 surmon - 不知道怎么称呼,但是是一个很牛 B 的人,点开博客就知道了...很牛,一次可以压缩 70%左右,还不失真,不过不购买的话压缩有限制,一次最多十张,每张有大小限制(忘记多大了,好像是 5M,好像是 10M) 淘宝 npm 镜像 - 加快 npm 包下载速度,其实更建议使用

    2.7K21

    准备将您的Vue应用迁移到Vue 3

    在这篇文章中,我想分享一下我最近试用Vue 3 Beta版本的经验,特别是有关您计划将现有Vue 2应用程序迁移到升级版本Vue 3时可能要注意的一些注意事项!...在简单的情况下,该模式可以代替$ dispatch和$ broadcast,但是对于更复杂的情况,建议使用专用的状态管理层,例如Vuex。 您也可以查看RFC文档,以了解为什么他们不推荐它。...toCurrency为$ 25.00 尽管它看起来不错,但是请记住,它实际上是一个“语法糖”,因为在运行时,toCurrency只要更新价格,它就始终会运行以格式化价格。...使用@vue/composition-api写您的组件 我非常感谢Vue社区提供的@vue/composition-api?。...我希望本文能帮助您为升级到Vue 3做好准备。作为Vue开发人员,我很高兴看到它的到来,因为它使用更好的API来处理反应性,更多的Typescript支持以及开发中的更好做法。

    1.2K20

    打造前端瑞士军刀,为你开发路上披荆斩棘

    UI库,越弄越好了 主要说上面一些,具体的一些vue插件可以从下面这个链接找: Vue插件集合 React 因为平时用react用的比较少,希望小伙伴在评论中进行补充,然后我再添加进来。...对于能持续学习的童鞋,这是个美好的时代 antd - 蚂蚁开源的react的UI库,用起来很舒服,不亏是用户体验部出的。目前市面上的UI库,我感觉这个说第二,没有敢说第一的吧。...小程序 WePY - 支持组件化的小程序开发框架 mpvue - 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系,目前支持多端小程序,如:微信,支付宝,百度...,各种旅行漂亮的照片,还有他的个人介绍 翁天信博客 - 他的官网中可以找到他博客的地址,但是有点不显眼,所以就列出来了 surmon - 不知道怎么称呼,但是是一个很牛 B 的人,点开博客就知道了...70%左右,还不失真,不过不购买的话压缩有限制,一次最多十张,每张有大小限制(忘记多大了,好像是 5M,好像是 10M) 淘宝 npm 镜像 - 加快 npm 包下载速度,其实更建议使用nrm,可以切换自己当前网络最快的源

    1.2K11

    10+个很酷的VueJS组件,模板和实验示例

    是一个免费的开源Bootstrap 4和Vue.js Admin仪表板,其中包含大量的组件,这些组件可以组合在一起并看起来非常漂亮。...它使你无需离开浏览器即可检测和解码QR码,所有组件都具有响应能力。除此之外,它接近零样式,因此你可以使它们适合你的布局。使用方法简单明了。 ?...https://vuejsexpo.com Vue Paper Dashboard PRO Vue Paper Dashboard PRO是一个基于Bootstrap和Vue构建的漂亮资源,它将帮助你在短时间内开始开发仪表盘...当与远程团队进行回顾时,或者当您希望随时间跟踪回顾结果时,这将很有用。它有三种类型的笔记,你可以移动笔记或添加点到个别的笔记。 ?...https://lauthieb.github.io/code-notes 希望这份清单对您的下一个开发项目有帮助 ?

    2.2K20

    提高你的编码效率

    但是我发现一个编辑器,用过之后就不想用别的编辑器了。也许我孤陋寡闻,知道得比较晚。他就是vscode. 我一向是对微软的东西不太感冒的。傻瓜式,大而全,慢。...可以说是程序员的小情人都不为过。 对于情人,我们希望他能漂亮,善解人意,能力出众,温柔贤惠。...好了,废话不多说,来看看它的庐山真面目吧。 ? 左边的第一个就是文档区,各种打开的项目,文档可以通过第一个来查看。 第二个就是快捷查找的。 第三个代码管理,直接集成git。 第四个就是调试工具。...Markdown All In One Markdown 格式化 TODO Highlight 这个插件能够在你的代码中标记出所有的 TODO 注释,以便更容易追踪任何未完成的业务。...": "js-beautify-html", // 下面这一段不能少,否则导致VSCode格式化代码时无法正确格式化vue的style和script块(缩进为4个空格)。

    1.7K10

    2020年 16 个最有用的 Vue UI库

    我们可以动态地生成和使用主题,根据自己的需求只用组件,UI元素与组件的优势在于可以更简单的使用API和其他的。...Buefy (⭐️ 7.1k) 网站: https://buefy.org/ github: https://github.com/buefy/buefy 如果我们希望为项目提供一个更简单且轻量的UI库...使用最先进的CLI设计应用程序,并提供精心编写,速度非常快的Quasar Web组件。 当使用Quasar时,你不需要像Hammerjs,Momentjs或Bootstrap这样的额外重型库。...具备使用CSS预处理程序的能力,它几乎适用于几乎所有开发团队。 就我个人而言,我真的很喜欢AT UI随附的最小样式和字体选择,而且我认为添加到任何项目中都非常直观且容易。...它具有强大的布尔玛集成度,并充分利用了Flexbox功能。 我最喜欢的组件之一是时间线,可以轻松创建漂亮的时间线,非常适合进行项目更新。 ? 好了,今天就分享到这里,你最喜欢的Vue.js库是什么?

    12.7K31

    VSCode 开发必备插件以及配置

    前言 VSCode 本文记录我使用过的比较好用的插件,持续更新 只记录插件名称及简单介绍,不记录具体用法,部分插件的用法会单独写文章记录 1....Prettier - Code formatter - 代码格式化 站长源码网 CSS Peek - 在 HTML 中通过 CSS id 或 class 定位 Polacode - 生成漂亮的代码截图...Vue 插件 Vetur - 语法高亮、智能感知、格式化 Vue VSCode Snippets - Vue 代码片段 4....,快速生成uni-app组件 2 uni-app-snippets 支持uni-app基本能力的代码片段,包括组件和API 3 uni-app-schemas 支持uni-app pages.json...open,将会自动使用默认浏览器打开插件授权页面 4、点击下图框框中的部分即可完成授权,页面不要关闭 推荐配置 settings.json 配置 { // 打开的新窗口后不覆盖旧窗口 "workbench.editor.enablePreview

    69720

    分享 42 个面向前端开发的 JS 库和框架

    在我看来,Vue 的一些好处是比其他的更容易学习和吸收框架,文档非常详细且易于理解。...12、Chart.js 地址:https://www.chartjs.org/ Chart.js 库可帮助您的网站创建漂亮的图表。它有很多图表,让我们在使用库时可以灵活处理传递给图表的数据。...28、Cleave.js 地址:https://nosir.github.io/cleave.js/ 当用户输入信息时,Cleave 可以很容易地重新格式化输入元素。...有助于对组件功能进行更多的解释,让用户更容易理解和使用。 31、Flip 地址:https://pqina.nl/flip/ Flip 是一个插件,可让您快速轻松地创建具有翻转效果的计数器。...它允许您为您的网站轻松构建日期选择器组件,而无需任何额外的使用或任何额外的库。 我喜欢这个库中的一些功能是深色和浅色主题。您可以设置允许用户选择的时间间隔,按地区设置日期等。

    7.1K31

    如何写一手漂亮的 Vue

    目前犹身为前端开发者,且在使用 Vue,那么就有了此文;这不仅是纪录或分享,也是在漫漫之路上下求索,更希望能探讨和指点,以资见识,提升其效——在晚晴幽草轩等着你。...另一个是其数据驱动的组件系统,即:用嵌套的组件树来描述用户界面(而一个组件恰恰可以对应MVVM中的ViewModel),其三是基于构建工具的单文件组件格式,即其所提供了强大的loader API,来定义对不同文件格式的预处理逻辑...相信,接下来的很长时间里,都须对这几方面加以学习、探索,然后加以利用。 如何漂亮使用 Vue 之实战组件篇 Vue 一大特色是用嵌套的组件树来描述用户界面。...另外还当学习 Vue 本身所提供的优化,像路由懒加载, 即:结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载,使得该组件访问时才加载...如何漂亮使用 Vue 之工作流篇 “轻功不代表武功,但速度决定了你我的距离。”——白凤(秦时明月)。智能化、自动化趋势越发明显,作为程序员如不能尽快适应,其所面临的窘境可想而知。

    1.8K60

    企鹅社区移动版Vue2.0升级手记

    通过实践,我总结了几点在整个过程中遇到的难点和我的解决思路: 1、HTML插值变化,移除了{{{value}}}语法 在1.0中,需要格式化显示HTML内容时(用来处理换行转及一些允许使用的特殊字符...所以,我决定使用全局钩子来统一实现鉴权,实践证明能节省不少代码,在全局钩子中实现鉴权后,后续业务逻辑可以不再关注鉴权逻辑,代码更清爽了。...当然afterEach也非常好用,可以通过它来设置页面title等一些后续操作。 在0.7中,在加载数据环节,会用到data钩子,它专用于设置当前组件的数据,在2.0中,移除了此方法,确实带来了不便。...下述情况不建议使用: 1)当数据交互相对较多的情况下,数据不会及时更新; 2)当页面需要带参数进行访问时,参数变化可能导致数据未更新; 3)需要及时鉴权的页面 我企鹅社区项目中,要让不希望被缓存的),这也是我感到不够灵活的地方。

    5.9K00

    web大前端必备的VSCode插件,常用的(15个)「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。 Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱。...2.Quokka Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。...当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。...同时,你还可以添加一些像 React Native 与 Vue 的相关 Web 开发插件包。 15.Themes 当然,在众多的实用插件中,岂能少了漂亮的主题呢?...你每天都会与你的 VSCode 编辑器进行“亲密的接触”,为何不把它打扮得更漂亮些呢?

    6.8K40

    14个最好的 JavaScript 数据可视化库

    请注意,我正在严格地讨论基于 SVG 的图表,因为它更容易实现。...当你的项目中有一个奇怪的图表,一个需要漂亮的界面基本功能,有所有的花里胡哨(工具提示、图例、X/Y 轴等)的东西,或当应用需要标准化、响应和详细的图表,特别是需要有多种类型时。...Nivo Nivo 是一个基于 D3 和 React 的漂亮框架,提供十四种不同类型的组件来呈现你的数据。...对于许多人来说,它是首选的 JS 库,因为它提供了多种预先构建的图表类型,例如条形图、折线图、区域图、日历图、地理图表等等。然而,对我来说,在大多数情况下,这个库有点过分,坦率地说我不建议使用它。...我希望这个列表可以帮助你在未来的项目中创建漂亮的图表。祝好运!

    6K30

    Vue 项目eslint 配置编程风格(VScode)

    我认为风格没有好坏,一个团队统一即可,保持代码简洁,漂亮,统一。...Vue 有关的格式化工具 ---- 1.ESLint(官网) ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。...JS 做为一种动态语言,写起来可以随心所欲,bug 遍野,但是通过合适的规则来约束,能让我们的代码更健壮,工程更可靠。 ESLint 可以自动检测配置解决这些问题。 ?...3.Prettier Prettier的中文意思是“漂亮的、机灵的”,也是一个流行的代码格式化工具的名称,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码。...在使用插件之前,你必须使用 npm 安装它。 配置项 说明 plugins 插件 一个环境定义了一组预定义的全局变量。

    3.4K41

    Welcome to Your Vue.js App

    ,就别问我了;可以问度娘,谷歌没意见; 5、如果你在某一点上不懂,可以留言给我,我想我会点击你; 6、你说的对,我就是喜欢最新版本,还是破解的版本; 7、说的对,升级了软件,不耽误你的脚手架等已经设置的文件使用...我们都希望可以跳出眼下的桎梏,可是到底要怎么做,却没有头绪,更没有毅力。 有句话说得好,“我们不能用制造问题时的同一水平思维来解决问题。”遇到这种时刻,最应该做的一件事,就是做出改变。...享受它提供的微调,高度可定制的体验,以适应您的开发工作流程。...四、网络技术支持 1、用更漂亮的格式重新格式化 使用带有漂亮行为的新格式化(Alt-Shift-Cmd / Ctrl-P),您现在可以使用Prettier格式化所选代码,文件或整个目录。...通过运行npm install --g vue-cli来安装它,然后在IDE的欢迎屏幕上按下Create New Project - Vue.js,然后回答关于您要在新项目中使用的模板和工具的问题。

    3.8K30

    打爆 React 泡沫,重新审视前端技术选择

    我给大家介绍几种,包括相关用例。React 的一大核心问题,就是它总想大包大揽、满足开发者的所有 需求。但这样一把瑞士军刀,在很多方面肯定是及不上专款专用的独立工具。...它们的最大用途,就是在不想用框架这类笨重技术时顶上。 最后,我还忽略了其他一些优秀的相关工具。...VUE 适用于: 对于社区规模、整体框架流行度比较看重;希望保留 React 的使用感受,但需要更多“电池”或类 HTML 特征;强调框架独立性,不希望工具被单一大公司拥有的前端开发者。...SOLID 适用于: 比较喜欢 React(和 JSX),但希望获得更现代、更快且 / 或更简单的使用体验,而且把性能当作头等大事的前端开发者。...Fresh 的每个组件要么经过静态渲染,要么在响应时作为 HTML 交付(不涉及任何 JavaScript),也就是所谓“孤岛”。它只会在客户端上渲染。当然,大家也可以需求进行混合和匹配。

    34310
    领券