Recommended Vue Libraries in 2022

From the public account: front-end charging treasure

Today, I would like to recommend several popular and practical Vue.js libraries!

1. State Management

(1)Pine

Pinia is the latest generation of lightweight state management library for Vue. It works with Vue 2.x and Vue 3.x. It is a state repository redesigned by Vue official members in November 2019, which allows you to share state across components/pages, and is responsive, similar to Vuex.

Github: https: //github.com/vuejs/pinia

(2) Vuex

Vuex is a state management pattern developed specifically for Vue.js applications. It uses a centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable manner.

Github: https: //github.com/vuejs/vuex

(3)vuex-persist

vuex-persistedstate is a Typescript-enabled Vuex plugin that enables you to persist your application's state to persistent storage, such as Cookies or localStorage.

Github:https://github.com/championswimmer/vuex-persist

2. Form

(1)You choose water

vee-validate is a form validation library for Vue.js that allows validating input and building better form UIs in a familiar declarative style or using composed functions.

Github: https://github.com/logaretm/vee-validate

(2)vue-form-making

vue-form-making is a visual form designer based on vue and element-ui. It uses the latest front-end technology stack and has a built-in i18n internationalization solution, which makes form development simple and efficient.

Github:https://github.com/GavinZhuLei/vue-form-making

(3)FormKit

FormKit is a form authoring framework for Vue developers that makes building high-quality production-ready forms 10x faster.

Github:https://github.com/formkit/formkit

3. Documentation

(1)VitePress

VitePress is the successor of VuePress, built on top of vite. Currently, it is in alpha stage. It's ready for documentation out-of-the-box, but configuration and theme APIs may still change between minor releases.

Github:https://github.com/vuejs/vitepress

(2)VuePress

VuePress is a lightweight Vue-based static site generator with a default theme optimized for writing technical documentation. It was created to meet the needs of Vue's own subproject documentation.

Github:https://github.com/vuepress/vuepress-next

(3)Gridsome

Gridsome is a Jamstack framework built on Vue.js that makes it easy for developers to build statically generated websites and apps that are inherently fast.

Github:https://github.com/gridsome/gridsome

4. Test

(1)Gear

Vitest is an extremely fast unit testing framework powered by Vite. It is consistent with Vite's configuration, converters, parsers and plugins, with out-of-the-box TypeScript / JSX support.

Github:https://github.com/vitest-dev/vitest

(2)Yes

Jest is a comprehensive JavaScript testing solution with a focus on simplicity and clarity. Suitable for most JavaScript projects.

Github:https://github.com/facebook/jest

(3)Mocha

mocha is a feature-rich javascript testing framework that runs in node.js and the browser, making asynchronous testing easy and fun. Mocha tests run continuously, allowing flexible and accurate reporting while mapping uncaught exceptions to the correct test cases.

Github:https://github.com/mochajs/mocha

5. Visualization

(1)ChartJS view

vue-chartjs is a Vue package for Chart.js, allowing users to easily use Chart.js in Vue, creating reusable chart components very easily, very suitable for people who need simple charts and run as fast as possible . vue-chartjs abstracts the basic logic, and also exposes the Chart.js object, allowing users to gain maximum flexibility. It supports Vue 3 and Vue 2.

Github:https://github.com/apertureless/vue-chartjs

(2)Apache ECharts

Apache ECharts is a Javascript-based data visualization chart library that provides intuitive, vivid, interactive, and customizable data visualization charts. It's written in pure JavaScript and based on zrender, a brand new lightweight canvas library.

GitHub: https://github.com/apache/echarts

(3)View-ECharts

Vue-ECharts is a Vue.js component of Apache ECharts. Use Apache ECharts 5 and support Vue.js 2/3 at the same time.

Github:https://github.com/ecomfe/vue-echarts

(4)Three

Trois is a Vue 3 visualization library based on Three.JS, a popular WebGL library. Three.JS has great support for both desktop and mobile devices. This library allows us to easily create 3D effects for websites using VueJS components.

Github:https://github.com/troisjs/trois

6. Components

(1)Vue Grid Layout

vue-grid-layout is a grid layout system, similar to Gridster, for Vue.js.

Github:https://github.com/jbaysolutions/vue-grid-layout

(2)Vue Draggable

Vue Draggable is a Vue drag and drop component based on Sortable.js.

Github:https://github.com/SortableJS/Vue.Draggable

(3)Tower View

Vue Tour is a lightweight, simple and customizable tour plugin for use with Vue.js. It provides a quick and easy way to guide users through your application.

Github:https://github.com/pulsardev/vue-tour

(4)Swiper.js

Swiper is a free and lightweight mobile device touch slider framework that uses hardware accelerated transitions. Mainly used with mobile websites, web applications, and native applications.

Github: https://github.com/nolimits4web/swiper

(5)vue-easytable

This library provides a fully functional and highly customizable table component/datagrid. It supports many features like virtual scrolling, column pinning, header pinning, header grouping, filters, sorting, cell ellipsis, row expansion, row checkboxes, etc.

Github:https://github.com/Happy-Coding-Clans/vue-easytable

7. UI components

(1)Element Plus

Element Plus, a set of Vue 3.0-based component libraries for developers, designers and product managers prepared by Ele.me's front-end team, Element Plus is a Vue3-based component library for designers and developers, providing Supporting design resources to help your website take shape quickly.

GitHubhttps://github.com/ElemeFE/element

(2)Vuetify

Vuetify is a well-built UI component library based on Vue.js, and the entire UI is designed in Material style. It allows developers without any design skills to create a stylish Material style interface.

GitHubhttps://github.com/vuetifyjs/vuetify

(3)Vant

Vant is a set of lightweight and reliable mobile component library. Through Vant, you can quickly build pages with a unified style, improve development efficiency, and support Vue 3.

Github:https://github.com/youzan/vant

(4)Naive UI

Naive UI is a front-end UI component library developed based on the relatively new Vue 3.0/TypeScript technology stack.

Github:https://github.com/TuSimple/naive-ui

8. Animation

(1)Animate.css

animate.css is a CSS collection of animation effects made using CSS3 animation, which presets many commonly used animations and is very easy to use.

GitHub:https://github.com/animate-css/animate.css

(2)Greensock

GreenSock is a JavaScript animation library for easily animating HTML elements. Used to create high-performance, zero-dependency, cross-browser animations, claimed to be used in over 4 million websites.

Github:https://github.com/greensock/GreenSock-JS/

(3)Popmotion

Popmotion is a 12KB JavaScript motion engine that can be used for animation, physics and input tracking. Native DOM support: CSS, SVG, SVG paths and DOM attributes are supported out of the box.

Github:https://github.com/Popmotion/popmotion

(4)Kinesis view

Vue Kinesis supports easy creation of complex interactive animations using Vue.js, which supports Vue 3.

Github:https://github.com/Aminerman/vue-kinesis

9. Icons

(1)IconPark

IconPark provides more than 2400 high-quality icons, and also provides a description of the meaning and source of each icon, which is convenient for developers to use. In addition, the website can also customize the icon, which is different from other icon sites. The icon library is an open source icon library of technology-driven icon styles under ByteDance.

Github:https://github.com/bytedance/iconpark

(2)Font Awesome

Font Awesome provides scalable vector icons, which can be changed using all the features provided by CSS, including: size, color, shadow or any other supported effects.

Github:https://github.com/FortAwesome/Font-Awesome

(3)Ionicons

Ionicons is a completely open source icon set. It is a built-in icon library of the well-known hybrid development framework Ionic Framework. It contains 1300 high-quality icons with elegant design and uniform style, which can meet most business scenarios.

Github:https://github.com/ionic-team/ionicons

(4)Bootstrap Icons

Bootstrap Icons is Bootstrap's open source SVG icon library, originally custom designed and built for its components (from form controls to navigation) and documentation, and now free to use in any project.

Github:https://github.com/twbs/icons

10. Rich Text Editor

(1)Tiptap

Tiptap is a Vue-based renderless rich text editor based on Prosemirror, fully extensible and renderless. Custom nodes can be easily added as Vue components. Use renderless components (functional components) for almost complete control over markup and styling. The appearance of the menu or where it appears in the DOM. This is entirely up to the user.

GitHub:https://github.com/ueberdosis/tiptap

(2)Quill.js

Quill.js is a rich text editor with cross-platform and cross-browser support. With its extensible architecture and expressive API, it can be fully customized to meet individual needs.

GitHub:https://github.com/quilljs/quill/

(3)TinyMCE

TinyMCE is a popular rich text editor. Its goal is to help other developers build elegant web content solutions. It is easy to integrate and can be deployed in cloud-based, self-hosted or hybrid environments. This setup makes it possible to incorporate frameworks such as Angular, React, and Vue. It can also be extended with more than 50 plugins, each with more than 100 customization options.

GitHub:https://github.com/tinymce/tinymce

(4)CKEditor 5

CKEditor is a powerful rich text editor framework with features like modular architecture, modern integration and collaborative editing. It is extensible through a plugin-based architecture, which allows the introduction of necessary content processing functionality. It's written from the ground up in ES6 and has excellent webpack support. Native integrations with Angular, React, and Vue.js are available.

GitHub:https://github.com/ckeditor/ckeditor5

11. Server-side rendering

(1)Nuxt.js

Nuxt.js is a general application framework based on Vue.js. Through the abstract organization of client/server infrastructure, Nuxt.js mainly focuses on UI rendering of applications. It presets various configurations needed to develop server-side rendered applications using Vue.js.

Github:https://github.com/nuxt/nuxt.js

(2)SSR

The ssr framework is an out-of-the-box server-side rendering framework created for front-end frameworks in server-side rendering scenarios. It is serverless-oriented and supports React, Vue2, and Vue3.

Github:https://github.com/zhangyuang/ssr

(3) Vue-meta

Vue-meta is a plugin for Vue.js that helps you manage HTML metadata in Vue.js components with SSR support. Vue-meta makes managing your app's metadata simple using Vue's built-in responsiveness.

Github:https://vue-meta.nuxtjs.org/

12. Data Acquisition

(1)Axios

Axios is a promise-based network request library for node.js and the browser.

Github:https://github.com/axios/axios

(2)vue-resource

Vue-resource is a plug-in for Vue.js, which can initiate requests and process responses through XMLHttpRequest or JSONP.

Github:https://github.com/pagekit/vue-resource

(3)vue-axios

vue-axios is a small library that integrates axios into Vuejs.

Github:https://github.com/imcvampire/vue-axios

13. Build tools

(1)Fast

Vite is a next-generation front-end development and build tool. Vite aims to provide out-of-the-box configuration, while its plug-in API and JavaScript API bring a high degree of extensibility and complete type support.

Github:https://github.com/vitejs/vite

(2)Webpack

webpack is a static module bundler for modern JavaScript applications. When webpack processes an application, it internally builds a dependency graph that maps to each module required by the project and generates one or more bundles.

Github:https://github.com/webpack/webpack

Guess you like

Origin blog.csdn.net/maxue20161025/article/details/127692983