10个相见恨晚的vue.js库！用好了，事半功倍！

2024-01-28 17:34:04

Vue 结合了 React 和 Angular 的优点，并且有着团结、活跃且庞大的社区，可以帮助解决开发中遇到的问题。开源社区不断提出解决问题的新方法。工具和库的数量也贡献量不断的增加。

**该框架非常小。**约为18–21KB；
Vue 支持用基于组件的方法来构建 Web 应用；
详细的文档。这对于初学者来说很容易上手；
**易于理解。**由于其结构简单，你可以轻松地把 Vue.js 添加到自己的 Web 项目里。它凭借定义良好的体系结构来保存你的数据。生命周期方法和自定义方法是分开的；
**轻松的集成。**你可以通过 CDN 来轻松添加 Vue.js，不依赖 Node.js 和 npm 环境就可以用。完全可以把它当成替代 jQuery 的绝佳选择；
出色的工具。 通过 Vue CLI ，你可以使用内置的路由、状态存储、Lint、单元测试、CSS预处理器、Typescript、PWA 等来启动新项目。此外，Vue CLI 还提供了用于管理项目的UI。

下面汇总了一些非常流行的工具和库，并包括在 Vue 生态系统中所涉及到的其他库和插件。

1.ViewUI

View UI，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

2.Vue.js Modal

Vue.js 模态框（Modal）是一个易用、高度可定制化的Vue.js模态框组件库，支持SSR。

3.Mint UI

Mint UI 由饿了么前端团队推出的 Mint UI，是一个基于 Vue.js 的移动端组件库。Mint-UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

4.Vuetify

一款非常精致的UI框架,它提供了很多常用的组件,依靠Material Design的设计优势,让你无需编写一行css代码就可以得到非常美观的界面功能。

5.Buefy

Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件，它提供了即装即用的轻量级组件。

特性：

使得你目前的 Bulma 主题/变量很简单
支持材质设计图标和 FontAwesome
除了 Vue＆Bulma 以外，没有任何内部依赖关系
约60KB min + gzip（含 Bulma）
语义代码输出
遵循 Bulma 设计和一些 Material Design UX
关注可用性和性能，而不是过度动画

6.Vue Material

Vue Material 简单、轻巧，并且完全按照 Google Material Design 规范构建。Vue Material 提供了超过 56个组件来构建不同类型的布局。Material Design Framework 拥有真正完整的文档。该框架非常轻巧，具有完全符合Google Material Design 指南的所有组件。这种设计并支持所有的现代浏览器适合所有的屏幕。

7.Nuxt.js

Nuxt 是一个简单而直接的框架，用于构建通用程序，例如：服务器端渲染的应用，单页应用，渐进式 Web 应用，或只是把它用作静态站点生成器。它也是模块化的，所以你只需使用程序所需的那些模块即可。Nuxt 使你不必纠结于构建和优化程序的工作。Nuxt.js 具有模块化架构，有50多个模块可供选择。

特征：

自动转译和打包（通过 webpack 和 babel）；
代码热加载；
可以选择服务器端渲染、单页应用程序或静态生成；
可通过 nuxt.config.js 文件进行配置；
为每个页面的页代码进行拆分；
带有 layouts/目录的自定义布局；
仅加载关键的CSS（页面级）。

Nuxt 成为 Vue 开发不可或缺的一部分，有许多贡献者和广泛的社区。

8.Quasar

Quasar 是一个基于 Vue 的通用框架，可让你用相同的代码库为不同平台编写应用程序：SPA，PWA，SSR 应用，混合移动应用或多平台桌面应用。Quasar 包含多达 81 个组件。

这里有大量的文档和的组件，这些组件在设计时都考虑了性能和响应能力。Quasar 默认情况下集成了最佳做法（HTML/CSS/JS最小化、缓存清除、tree shaking，源映射、带有延迟加载的代码拆分、ES6 生成，code-splitting、可访问性等），所以你只需要把经历放在程序的功能上。它还提供了一个 CLI 工具，用于轻松构建新的项目。

9.Bootstrap Vue

Bootstrap Vue 是基于 Bootstrap 库的 UI 套件。它只是用 Vue 代码替换了常规的 Bootstrap 组件中的JavaScript。借助 Bootstrap Vue，你可以使用 Vue.js 和世界上最受欢迎的前端 CSS 库——Bootstrap v4 在 Web 上构建响应式、移动优先和 ARIA 可访问的项目。它还可以轻松地与 Nuxt.js 集成。

文档内容丰富，加上强大的社区支持，这使你可以轻松的启动一个项目。