vue 持续流行, 并被许多开发人员迅速采用, 并且 vue.js 工具随处可见. 这并非没有道理: Vue 的学习曲线浅, 功能驱动的结构清晰明了, 并且出色的文档资料使新手可以轻松上手, 而经验丰富的开发人员也可以从其他框架 (如 React 或 Angular) 进行切换.
如果您认真对待 Vue 开发, 迟早会遇到一些脱颖而出的基本工具和库. 使用它们可以提升您作为 Vue 开发人员的职业生涯, 并使您感到自己像专家.
我已经整理了一份清单, 其中列出了您应该了解并最终在 Vue.JS 项目中使用的最著名的工具和库. 与目前仅列出 UI 组件库的许多其他文章不同, 该汇编探索了 Vue 生态系统中工具, 库和插件的广泛混合.
我是根据它们的有用性, 有效性和独特性选择它们的, 而不是基于它们的 GitHub 受欢迎程度或星级.
Vue CLI
如今, 对于每个 JavaScript 应用程序框架而言, 似乎都必须具备某种 CLI 工具. Vue 也不例外. Vue CLI https://cli.vuejs.org/ 是用于快速 Vue 开发的功能齐全的工具集. 除了通常的项目支架外, 它还可以通过使用其即时原型制作功能来尝试新的想法, 甚至无需创建完整的项目.
默认情况下, Vue CLI 提供对主要 web 开发工具和技术的支持, 例如 Babel,TypeScript,ESLint,PostCSS,PWA,Jest,Mocha,Cypress 和 Nightwatch. 这要归功于其可扩展的插件系统. 这意味着社区可以构建和共享可重复使用的插件以满足常见需求.
但是锦上添花的是功能强大的 GUI (Vue UI, 随 CLI 一起提供), 它允许您轻松地创建项目, 然后在不需要弹出的情况下配置和管理项目.
点击这里查看: Vue CLI https://cli.vuejs.org/
VuePress
Vue 生态系统中的下一个主要参与者是 VuePress https://v1.vuepress.vuejs.org/ , 这是一种由 Vue 驱动的静态站点生成器. 最初是作为编写技术文档的工具而创建的, 现在它是一个小型, 紧凑且功能强大的无头 CMS. 从 1.x 版开始, 它提供了出色的博客功能和强大的插件系统. 它带有一个默认主题(根据技术文档提供), 但是您也可以构建自定义主题或使用社区中的预制选项.
在 VuePress 中, 您可以在 Markdown 中编写内容, 然后将其转换为预渲染的静态 html 文件. 加载这些文件后, 您的站点将作为由 Vue,Vue Router 和 Webpack 支持的单页应用程序运行.
VuePress 的主要优点之一是您可以在 Markdown 文件中包含 Vue 代码或组件. 这给您带来了强大的功能和灵活性, 因为您几乎可以像常规的 Vue 应用一样开发网站, 并从中获得所有好处.
点击这里查看: VuePress https://v1.vuepress.vuejs.org/
Gridsome
Gridsome https://gridsome.org/ 与 VuePress 有许多相似之处, 但是在处理数据源时采用了一种非常强大的方法. 它使您可以连接和使用应用程序中的多种数据, 然后将这些数据统一在一个 GraphQL 层中. 基本上, Gridsome 将 Vue 用于前端功能, 将 GraphQL 用于数据管理. 可以通过以下三个步骤总结其工作方式:
您以 Markdown,JSON,YAML 或 CVS 数据格式提供内容, 或从 WordPress 或 Drupal 等 CMS 导入内容.
内容被转换为 GraphQL 层, 该层提供集中的数据管理. 然后, 您可以使用这些数据通过 Vue 构建您的应用程序.
您可以将预渲染的 HTML 文件部署到静态 Web 主机或 CDN, 例如 Netlify,Amazon S3,Now.sh,Surge.sh 等.
Gridsome 提供了一些很好的最佳实践, 例如代码拆分, 资产优化, 渐进式图像和链接预取. 因此, Gridsome 速度很快, 并且支持 PWA 和 SEO 友好.
点击这里查看: Gridsome https://gridsome.org/
Vuex
状态管理是开发人员在 Web 应用程序构建中遇到的主要问题之一. 为了解决这个问题, Vue 提供了一个状态管理系统 Vuex https://vuex.vuejs.org/ . 它充当应用程序中所有组件的集中存储, 其中状态只能以可预测的方式进行更改. store 是一个特殊的对象, 分为四个部分:
state - 存储应用程序数据的对象
getters - 包含用于抽象访问状态的方法的对象
mutations - 包含直接影响状态的方法的对象
actions - 包含用于触发变异和执行异步代码的方法的对象
store 也可以分为多个模块, 以实现更好的可维护性.
点击这里查看: Vuex https://vuex.vuejs.org/
Nuxt
在使用服务器端渲染 (SSR) 时, 通常采用 Nuxt https://nuxtjs.org/ . 这是用于构建通用应用程序的简单直接的框架. 它也是模块化的, 因此您只能使用应用程序所需的那些模块.
使用 Nuxt, 您可以创建服务器呈现的应用程序(SSR), 单页应用程序(SPA), 渐进式 Web 应用程序(PWA), 或仅将其用作静态站点生成器.
简而言之, Nuxt 使您摆脱了结构化和优化应用程序的繁琐工作, 从而为您提供了精简且更令人愉悦的开发体验.
点击这里查看: Nuxt https://nuxtjs.org/
Vuetify
Vuetify https://vuetifyjs.com/en/ 是目前最好的 UI 组件库之一. 它基于 Material Design 规范提供了大量的精心设计的组件(80 多个), 几乎可以满足任何应用程序的需求.
您可以使用它来构建 SSR 应用程序, SPA,PWA 和移动应用程序. 您可以启动新应用或将其添加到现有应用中. 它提供免费和高级主题, 但是您也可以构建自己的主题. 它还提供了一个仅选择和选择正在使用的组件的系统, 从而极大地减少了应用程序的最终大小.
Vuetify 的所有组件都有很好的文档记录, 并提供了清晰的示例.
点击这里查看: Vuetify https://vuetifyjs.com/en/
Quasar
Quasar https://quasar.dev/ 是 JavaScript 版本的 "一次写入, 到处运行" 的 Java 哲学. 它是一个通用的, 支持 Vue 的框架, 允许您使用相同的代码库为不同的平台编写应用程序. spas,pwas,ssr 应用, 混合移动应用或多平台桌面应用, 你来命名吧!
它有很好的文档和大量的组件, 设计时考虑到了性能和响应能力. Quasar 默认情况下集成了最佳实践(HTML/CSS/JS 缩小, 缓存破坏, 树抖动, 源映射, 延迟加载的代码拆分, es6 传输, 代码 linting, 可访问性), 因此您可以主要关注应用程序的功能. 它还为新项目的轻松搭建提供了一个 cli 工具.
点击这里查看: Quasar https://quasar.dev/
Storybook
Vue 主要是一个基于组件的框架, 因此编写好的, 高效的组件对每个应用程序开发人员都至关重要. 在此过程中, Storybook https://storybook.js.org/ 可能会派上用场. 它使您可以在易于使用和隔离的环境中开发, 管理和测试 UI 组件. 该工具使开发人员可以独立于主应用程序创建组件, 并在隔离的开发环境中交互式地展示它们, 而不必担心特定于应用程序的依赖性和要求.
Storybook 提供了许多附加组件, 以及灵活的 API, 可以根据需要定制 Storybook. 还可以导出一个静态 Web 应用程序, 并将项目部署到任何 HTTP 服务器.
点击这里查看: Storybook https://storybook.js.org/
Vue Apollo
最近有很多关于 GraphQL 的讨论. 因此, 如果你已经熟悉它, 并希望将其与 Vue 集成, 你应该尝试 Vue Apollo https://vue-apollo.netlify.com/ . 这个库使 Vue 和 GraphQL/Apollo 的使用更加流畅和愉快.
点击这里查看: Vue Apollo https://vue-apollo.netlify.com/
Eagle.JS
Eagle.JS https://github.com/zulko/eagle.js/ 是使用 Vue 构建的功能强大, 灵活且独特的幻灯片系统. 它使您可以在演示文稿中创建易于重复使用的组件, 幻灯片和样式. 它还支持动画, 主题和交互式小部件, 非常适合制作 Web 演示. Eagle.JS 具有简单且易于破解的 API, 因此您可以真正自由地制作所需的幻灯片.
您可以使用此库执行的最大操作之一是将幻灯片放到单独的文件中, 然后在其他幻灯片放映中重复使用. 您也可以将特定幻灯片的幻灯片导入另一个幻灯片中. 使用如此强大的工具, 您可以进行复杂, 交互式且有趣的演示.
点击这里查看: Eagle.JS https://github.com/zulko/eagle.js/
5 个更著名的 Vue 工具和库
Vue DevTools https://github.com/vuejs/vue-devtools 是一个很棒的浏览器扩展, 用于调试 Vue 和 Vuex 应用程序.
Vue Test Utils https://github.com/vuejs/vue-test-utils 是用于测试 Vue 组件的有用实用程序的集合.
Vue Router https://github.com/vuejs/vue-router 是 Vue 的官方路由.
Vue Native https://vue-native.io/ 是用于移动应用程序的 JavaScript 框架, 类似于 React Native.
Weex https://weex.apache.org/ 是使用现代网络技术 (包括 Vue) 构建移动应用程序的框架.
来源: http://www.css88.com/web/vue-js/12502.html