众所周知,Vue目前越来越热门,被很多开发人员采用,因此其生态也越来越完善,相关的工具和库也很丰富。这主要得益于:Vue的学习曲线,清晰的设计结构和使用文档,让有经验的开发人员从其他框架(React和Angular)很方便的入手。今天的这篇文章笔者从这些工具的实用性、有效性、独特性选了这十款工具和库,而不是依据Github受欢迎程度或星级,有些你已经很熟悉了并在使用,有些还比较陌生,好了,让我来一起看下这十款热门的工具和库。
和其他前端框架一样,为了方便开发者快速上手,都提供CLI类似的脚手架工具。Vue CLI是一套功能齐全的工具,可用于快速Vue开发。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。比如你能在项目中很轻松的集成类似Babel,TypeScript,ESLint,Postcss,PWA,Jest,Mocha,Cypress和Nightwatch等这些插件。
VuePress是以Vue驱动的静态网站生成器,是一个由Vue、Vue Router和webpack驱动的单页应用。在VuePress中,你可以使用Markdown编写文档,然后生成网页,每一个由VuePress生成的页面都带有预渲染好的html,也因此具有非常好的加载性能和搜索引擎优化。同时,一旦页面被加载,Vue将接管这些静态内容,并将其转换成一个完整的单页应用,其他的页面则会只在用户浏览到的时候才按需加载。
官方地址:https://v1.vuepress.vuejs.org/
Gridsome类似VuePress,但不完全相同,它也是使用开发人员喜爱的最新网络技术工具构建网站 - Vue.js,GraphQL和Webpack。 获得热重新加载和Node.js的所有功能。 Gridsome让搭建筑网站再次变得有趣。如果你想建个博客站,可以考虑下。 其特点如下:
官方地址:https://gridsome.org/
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改,并且你的修改可以得到全局的响应变更。每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。store包含四个部分:
官方网址:https://vuex.vuejs.org/
Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
其官方地址:https://nuxtjs.org/
Vuetify目前是基于vue的最好的UI组件库之一。它提供了大量基于Material Design规范精心制作的组件(80+),足以满足任何应用程序的需求。
您可以使用它来构建SSR应用程序,SPA,PWA和移动应用程序。所有Vuetify组件都有很好的文档说明,并提供了清晰的示例。
官方网址:https://vuetifyjs.com/en/
Quasar(发音为/kweɪ.zɑɹ/)是MIT许可的开源框架(基于Vue),可帮助Web开发人员创建:
Quasar允许开发人员编写一次代码,然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序,并提供精心编写,速度非常快的Quasar Web组件。
当使用Quasar时,你不需要加载像Hammerjs,Momentjs或Bootstrap这样额外的库。它拥有这些功能,而且体积很小!
官方网址:https://quasar.dev/
对于前端开发来说,组件化技术已经是一门必修课了,这其中又主要以 react 和 vue 为主。但平时在开发组件,尤其是公共组件或者第三方组件库的时候,往往会有一些困扰:
所以,storybook 就是为了解决这些问题而出现的,它为你的组件搭建了一个强大的开发环境,主要提供了以下的几个功能:
该工具使开发人员能够独立于主应用程序创建组件,并在隔离的开发环境中以交互方式展示它们,而无需担心特定于应用程序的依赖关系和要求。方便开发人员、产品经理、设计人员等多人参与到项目中。
官方网址:https://storybook.js.org/
最近有很多关于GraphQL的讨论。因此,如果您已经熟悉它并希望将其与Vue集成,那么您应该尝试Vue Apollo。这个库能很方便的将Vue和GraphQL集成。
官方网址:https://vue-apollo.netlify.com/
Eagle.js 是一个基于 Vue.js Web 框架构建的幻灯片系统。它支持动画、主题、互动小部件(用于网络演示),并且可以轻松地在演示文稿之间重用组件、幻灯片和样式。
官方网址:https://github.com/zulko/eagle.js/
今天的内容就到这里,希望你能找到心意的工具和库,如果你有好的工具和库推荐,欢迎你在留言区进行分享。