您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

十款热门的Vue.js工具和库

时间:2019-07-26 14:04:29  来源:  作者:
十款热门的Vue.js工具和库

 

众所周知,Vue目前越来越热门,被很多开发人员采用,因此其生态也越来越完善,相关的工具和库也很丰富。这主要得益于:Vue的学习曲线,清晰的设计结构和使用文档,让有经验的开发人员从其他框架(React和Angular)很方便的入手。今天的这篇文章笔者从这些工具的实用性、有效性、独特性选了这十款工具和库,而不是依据Github受欢迎程度或星级,有些你已经很熟悉了并在使用,有些还比较陌生,好了,让我来一起看下这十款热门的工具和库。

1、Vue CLI

十款热门的Vue.js工具和库

 

和其他前端框架一样,为了方便开发者快速上手,都提供CLI类似的脚手架工具。Vue CLI是一套功能齐全的工具,可用于快速Vue开发。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。比如你能在项目中很轻松的集成类似Babel,TypeScript,ESLint,Postcss,PWA,Jest,Mocha,Cypress和Nightwatch等这些插件。

2、VuePress

十款热门的Vue.js工具和库

 

VuePress是以Vue驱动的静态网站生成器,是一个由Vue、Vue Router和webpack驱动的单页应用。在VuePress中,你可以使用Markdown编写文档,然后生成网页,每一个由VuePress生成的页面都带有预渲染好的html,也因此具有非常好的加载性能和搜索引擎优化。同时,一旦页面被加载,Vue将接管这些静态内容,并将其转换成一个完整的单页应用,其他的页面则会只在用户浏览到的时候才按需加载。

官方地址:https://v1.vuepress.vuejs.org/

3、Gridsome

十款热门的Vue.js工具和库

 

Gridsome类似VuePress,但不完全相同,它也是使用开发人员喜爱的最新网络技术工具构建网站 - Vue.js,GraphQL和Webpack。 获得热重新加载和Node.js的所有功能。 Gridsome让搭建筑网站再次变得有趣。如果你想建个博客站,可以考虑下。 其特点如下:

  • 使用Vue.js,webpack和Node.js等现代工具构建网站。
  • 使用任何CMS或数据源获取内容。从wordPress/ target=_blank class=infotextkey>WordPress,Contentful,本地Markdown或任何其他无头CMS或API中提取数据。
  • 首先只加载关键的HTML,CSS和JAVAScript。然后预取下一页,以便用户可以非常快速地点击,而无需重新加载页面,即使在离线时也是如此。
  • Gridsome使用超快速静态站点生成器,JavaScript和API的强大功能来创建令人惊叹的动态Web体验。
  • Gridsome站点通常不连接到任何数据库,并且可以完全托管在全局CDN上。它可以处理数千到数百万次点击,并且不需要昂贵的服务器成本。

官方地址:https://gridsome.org/

4、Vuex

十款热门的Vue.js工具和库

 

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改,并且你的修改可以得到全局的响应变更。每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。store包含四个部分:

  • state – 应用的数据内容对象
  • getters – 定义相关方法获取state中的数据
  • mutations – 定义的相关方法操作state中的数据
  • actions – Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作。

官方网址:https://vuex.vuejs.org/

5、 Nuxt

十款热门的Vue.js工具和库

 

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

其官方地址:https://nuxtjs.org/

6、Vuetify

十款热门的Vue.js工具和库

 

Vuetify目前是基于vue的最好的UI组件库之一。它提供了大量基于Material Design规范精心制作的组件(80+),足以满足任何应用程序的需求。

您可以使用它来构建SSR应用程序,SPA,PWA和移动应用程序。所有Vuetify组件都有很好的文档说明,并提供了清晰的示例。

官方网址:https://vuetifyjs.com/en/

7、Quasar

十款热门的Vue.js工具和库

 

Quasar(发音为/kweɪ.zɑɹ/)是MIT许可的开源框架(基于Vue),可帮助Web开发人员创建:

  • 响应式网站
  • PWA(Progressive Web App
  • 通过Apache Cordova构建移动APP(AndroidIOS,…)
  • 多平台桌面应用程序(使用Electron)

Quasar允许开发人员编写一次代码,然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序,并提供精心编写,速度非常快的Quasar Web组件。

当使用Quasar时,你不需要加载像Hammerjs,Momentjs或Bootstrap这样额外的库。它拥有这些功能,而且体积很小!

官方网址:https://quasar.dev/

8、Storybook

十款热门的Vue.js工具和库

 

对于前端开发来说,组件化技术已经是一门必修课了,这其中又主要以 react 和 vue 为主。但平时在开发组件,尤其是公共组件或者第三方组件库的时候,往往会有一些困扰:

  • 不能很好的管理多个组件,尤其是在组件预览的时候,不能一目了然
  • 在组件预览的时候,也不能很好的反应一个组件的多个不同状态
  • 自动化交互测试可以使用 enzyme,但很多时候还得手动测试,就比较麻烦了
  • 在写文档的时候,需要将组件预览和文档写在一起,并需要切换到不同的状态,就比较吃力了

所以,storybook 就是为了解决这些问题而出现的,它为你的组件搭建了一个强大的开发环境,主要提供了以下的几个功能:

  • 提供了一个强大的 UI 组件管理页面,可以很便捷、清晰的分组、管理多个组件或一个组件的多个不同状态
  • 在自动化交互测试之外,可以很方便的进行手动交互测试,并且可以动态改变组件参数,查看视图变化
  • 可以将组件预览导出为静态资源,这样就可以很方便查看组件的文档和不同参数对应的不同视图
  • 还有一系列的插件,提供了很多额外的功能,帮助你更好的开发、测试、优化组件

该工具使开发人员能够独立于主应用程序创建组件,并在隔离的开发环境中以交互方式展示它们,而无需担心特定于应用程序的依赖关系和要求。方便开发人员、产品经理、设计人员等多人参与到项目中。

官方网址:https://storybook.js.org/

9、Vue Apollo

十款热门的Vue.js工具和库

 

最近有很多关于GraphQL的讨论。因此,如果您已经熟悉它并希望将其与Vue集成,那么您应该尝试Vue Apollo。这个库能很方便的将Vue和GraphQL集成。

官方网址:https://vue-apollo.netlify.com/

10、Eagle.js

十款热门的Vue.js工具和库

 

Eagle.js 是一个基于 Vue.js Web 框架构建的幻灯片系统。它支持动画、主题、互动小部件(用于网络演示),并且可以轻松地在演示文稿之间重用组件、幻灯片和样式。

官方网址:https://github.com/zulko/eagle.js/

小节

今天的内容就到这里,希望你能找到心意的工具和库,如果你有好的工具和库推荐,欢迎你在留言区进行分享。



Tags:Vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  Tags: Vue  点击:(2)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Tags: Vue  点击:(14)  评论:(0)  加入收藏
开头最近要研究有什么新奇的产品和项目,发现一个网站很有意思,可以纯前端一键随机生成头像,刚好他们的代码是开源,并且基于vue3,我想开源拿出来给大家分享。效果: 开始项目本身基...【详细内容】
2021-12-03  Tags: Vue  点击:(15)  评论:(0)  加入收藏
问题后端已经配置好了跨域,前端本地搭建vue-cli测试环境的时候如何解决跨域?(前提进行了基本的axios封装)分析这个时候后端API是一个明确的外网环境(使用外网IP或固定域名访问),...【详细内容】
2021-11-03  Tags: Vue  点击:(55)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: Vue  点击:(34)  评论:(0)  加入收藏
一、Vue介绍1、什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、学习Vue的原因三大主流框架之一:Angular React Vue先进的前端设计模式:MVVM可以完全脱离服务器...【详细内容】
2021-10-22  Tags: Vue  点击:(51)  评论:(0)  加入收藏
什么是vuevue是尤雨溪在2014年发布的一个渐进式的js框架,它有着双向绑定的特性,同时它的虚拟dom技术让性能得到大大提升。最重要的就是它是渐进式的应用,你可以在你的项目中逐...【详细内容】
2021-09-22  Tags: Vue  点击:(78)  评论:(0)  加入收藏
前端框架:vue.js效果图: 图书管理显示,查询,删除 页面css样式:<style>* {margin: 0;padding: 0;}#app {width: 900px;padding: 20px;margin: 50px auto;box-shadow: 0 0 10px #82...【详细内容】
2021-09-17  Tags: Vue  点击:(91)  评论:(0)  加入收藏
本文分享自华为云社区《【云驻共创】vue3相比 vue2 的十项优点》,作者: 海拥 。Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这...【详细内容】
2021-09-16  Tags: Vue  点击:(73)  评论:(0)  加入收藏
1.vue create demo2.vue ui3.搜索 vue-cli-plugin-electron-builder,勾选,安装4.npm run electron:serve5.npm run electron:build6.build complete!构建完成!构建完成后,看一...【详细内容】
2021-09-09  Tags: Vue  点击:(64)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条