7个实用的 Vue.js 工具和库

爱被打了一巴掌 2022-11-27 03:12 297阅读 0赞

1: Nuxt.js

**网站：** [https://nuxtjs.org/][https_nuxtjs.org]  
**Github：** [https://github.com/nuxt/nuxt.js][https_github.com_nuxt_nuxt.js]  
**Github** **stars:** 28.9k

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

![format_png][]

2：Quasar

**网站：** [https://quasar.dev/][https_quasar.dev]  
**Github：** [https://github.com/quasarframework/quasar][https_github.com_quasarframework_quasar]  
**Github** **stars:** 15.8k  
Quasar-Framework 是一款基于vue.js开发的开源的前端框架,  
只写一次代码的情况下发布到多个平台 website, PWA ,Mobile App 和 Electron App ，用起来表示十分满意。

![format_png 1][]

3：Bootstrap Vue

**网站：** [https://bootstrap-vue.org/][https_bootstrap-vue.org]  
**Github:** [https://github.com/bootstrap-vue/bootstrap-vue][https_github.com_bootstrap-vue_bootstrap-vue]  
**Demo:** [https://bootstrap-vue.org/play][https_bootstrap-vue.org_play]  
**Github stars:** 12k

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

![format_png 2][]

4、Vue CLI

**网站：** [https://cli.vuejs.org/zh/][https_cli.vuejs.org_zh]  
**Github：** [https://github.com/vuejs/vue-cli][https_github.com_vuejs_vue-cli]  
**Github** **stars:** 26k

Vue CLI 直接支持各种主流 Web 开发工具和技术，如 Babel、TypeScript、ESLint、PostCSS、PWA、Jest、Mocha、Cypress 和 Nightwatch 等。这主要归功于它的可扩展插件系统。这意味着社区可以构建和共享可复用的插件以满足常见需求。

![format_png 3][]

### 5：VuePress ###

**网站：** [https://www.vuepress.cn/][https_www.vuepress.cn]  
**Github：** [https://github.com/vuejs/vuepress][https_github.com_vuejs_vuepress]  
**Github** **stars:**17.1k

VuePress 是 Vue 生态系统中的另一大重头戏。它是一个基于 Vue 的静态站点生成器，最初是用来编写技术文档的工具，现在则发展成为一个小巧、紧凑、功能强大的无头 CMS。从版本 1.x 开始，它提供了出色的博客功能和强大的插件系统。它有一个默认主题（适用于技术文档），但你也可以构建自定义主题或使用社区中的预制主题。

![format_png 4][]

### 6： Vuex ###

**网站：** [https://vuex.vuejs.org/][https_vuex.vuejs.org]  
**Github：** [https://github.com/vuejs/vuex][https_github.com_vuejs_vuex]  
**Github** **stars:**24.5k

VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求。

![format_png 5][]

## 7：Vuetify ##

**网站：** [https://vuetifyjs.com/en/][https_vuetifyjs.com_en]  
**Github：** [https://github.com/vuetifyjs/vuetify][https_github.com_vuetifyjs_vuetify]  
**Github** **stars:**27k

Vuetify确实是一款非常精致的UI框架，它提供了很多常用的组件，依靠Material Design的设计优势，让你无需编写一行css代码就可以得到非常美观的界面功能。响应式做的不错，移动PC多端支持，配置灵活，组件也挺多的，足够现代，功能全面vuetify，一直用一直爽，强烈推荐vuetify。

![format_png 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70][]

[https_nuxtjs.org]: https://nuxtjs.org/
[https_github.com_nuxt_nuxt.js]: https://github.com/nuxt/nuxt.js
[format_png]: /images/20221124/6b201d1ad0e34cf29ac321687abbf9fd.png
[https_quasar.dev]: https://quasar.dev/
[https_github.com_quasarframework_quasar]: https://github.com/quasarframework/quasar
[format_png 1]: /images/20221124/8773d49f3fe343bea001767c93f4d897.png
[https_bootstrap-vue.org]: https://bootstrap-vue.org/
[https_github.com_bootstrap-vue_bootstrap-vue]: https://github.com/bootstrap-vue/bootstrap-vue
[https_bootstrap-vue.org_play]: https://bootstrap-vue.org/play
[format_png 2]: /images/20221124/66832d074c5d49f3a1809bc2930cdd42.png
[https_cli.vuejs.org_zh]: https://cli.vuejs.org/zh/
[https_github.com_vuejs_vue-cli]: https://github.com/vuejs/vue-cli
[format_png 3]: /images/20221124/c05a8f0c67f542368eab0ed37a88ab80.png
[https_www.vuepress.cn]: https://www.vuepress.cn/
[https_github.com_vuejs_vuepress]: https://github.com/vuejs/vuepress
[format_png 4]: /images/20221124/c4392d3a5aef44ee8a6b74d7c602f076.png
[https_vuex.vuejs.org]: https://vuex.vuejs.org/
[https_github.com_vuejs_vuex]: https://github.com/vuejs/vuex
[format_png 5]: /images/20221124/5c99308b18444ab3bdd492e41650f72e.png
[https_vuetifyjs.com_en]: https://vuetifyjs.com/en/
[https_github.com_vuetifyjs_vuetify]: https://github.com/vuetifyjs/vuetify
[format_png 6]: /images/20221124/0e62c969eacd4b968c5240c0dd4d4f66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221124/34c90dce809443388b3663d38ae35b9d.png