6 vue libraries worth knowing about in 2022 ['explosion']

This article will share with you 6 vue-related libraries that are worth knowing. These 6 libraries are very likely to "explode" in 2022. Come and collect them to learn more. I hope they will be helpful to everyone!

2022 What new dark horse will emerge from the front-end circle? No one knows this.

But according to my personal understanding, the following 6 and vue related libraries are very likely to "explode" in 2022 ”, or “Keep on blasting”! Let’s learn quickly! [Related recommendations: vue.js video tutorial]

1. vueuse: Exclusive toolset for vue developers!

Official website address: https://vueuse.org/

A function toolset based on Vue's combined API.

In any environment where Vue Composition Api (combined API) can be used, you can improve your performance by installing the vueuse tool library Development efficiency (yes, both vue2.x and vue3.x can be played).

can be understood as vue exclusive lodash!

What toolsets does it have? There are too many, you can’t think of them, but you can’t use them!

Generally divided into the following categories to provide tool functions:

• Animation
• Browser
• Component
• Format Change
• Sensor
• State(state machine)
• Public method
• Listening
• Miscellaneous

Taking myself as an example, useTemplateRefsList is a super practical method that I have recently used extensively in actual project development.

useTemplateRefsList: This method can help you quickly bind for component ref# in the vue3 component api ##. Think more thoroughly than realizing it yourself.

<script setup>
import { onUpdated } from &#39;vue&#39;
import { useTemplateRefsList } from &#39;@vueuse/core&#39;

const refs = useTemplateRefsList<HTMLDivElement>() // 用来存储元素 ref 的数组

onUpdated(() => {
  console.log(refs)
})
</script>
<template>
  <!-- 在这里绑定 ref -->
  <div v-for="i of 5" :key="i" :ref="refs.set"></div>
</template>

In addition, there are various useful tools, such as

useVModel

, useInterval, useCssVar, etc., all waiting for you. Go discover. Simply put, this is a tool library that allows you to

get off work earlier

. Use it early and get off work early. 2.

Pinia

: A better-used vue store library (vuex competing product)

天下Bitter

vuex

It’s been a long time!

Official website address: https://pinia.vuejs.org/

I think back then,

vuex

The reputation of "Officially approved and passed down by the ancestors" exclusively occupies the throne of vue status management, but too many people have personally experienced the "complexity" and "inconvenience" of its design when using it. I drew a cartoon to express my feelings:

So, what are the advantages of

Pinia

?

It can directly operate
• state

  without registering Mutation! Action.

It supports the ability to enhance
• Pinia

  through plug-ins.

Good
• Typescript

  support.

Server-side rendering support.
Definition:

// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Use:

import { useCounterStore } from '@/stores/counter'
export default {
  setup() {
    const counter = useCounterStore()
    counter.count++
    counter.$patch({ count: counter.count + 1 })
    counter.increment()
  },
}

Does it seem lighter than using

vuex

? It is said that

vuex 5.x

also refers to the design ideas of Pinia in the design of API, which can also be seen from this Pinia It has also been officially recognized

Therefore,

Pinia

is indeed worth learning, and it is also very useful in 2022 Frame of potential blaze. 3.

Element Plus

: The real ElementUI 3.0

Why

ElementUI 2.x

The orthodox continuation Is it called Element Plus, not Element 3.0?

This is the story of Li Kui and Li Gui, everyone understands it.

Official website address: https://element-plus.gitee.io/zh-CN/

说

ElementUI 2. x

is the most famous and widely spread UI component library in the vue 2.x version. I think most people in the industry should recognize it. <p>Now<code>vue3 has also become the official version of vue. With the increase of vue3 users, Element Plus will inevitably usher in A period of rapid growth.

Element Plus What are the advantages?

• API is highly consistent with Element UI 2.x, with low code migration and learning costs.

• Core implementation is highly similar to Element UI 2.x, such as the PopupManager I introduced.

• Use the style definition mode of css var to make style switching smoother.

• Trustworthy maintenance team.

It can be boldly predicted that Element-Plus will still be popular in 2022.

4. Navie UI: The component library recommended by You personally

is a non-KPI work with a pleasing style, complete components and friendly writing style.

Official website: https://www.naiveui.com/zh-CN/os-theme

Although only in some small projects And Navie UI is used in Demo, but this project is really enjoyable.

It comes from the open source of a self-used framework called "Tucson". The name of the company and the name of the framework can be said to be very interesting.

"Navie UI" from "Tucson", emmm....

Let us briefly list the highlights of this framework:

• The perfection and richness of components are very impressive.

• Skinning and theme support is great.

• Excellent TypeScript support. TS YYDS!

I personally like this project very much, but how far it can go really needs time to be verified.

Hope it can be liked and used by more people in 2022!

5. Nuxt: SSR The hope of the whole village

Single-page applications are great, but slow to load and have low SEO scores.

At present, React and Vue are the two dominant companies (Angular: "What about me?"), We want a web single page application (SPA), which is too simple.
But it also raises other problems: Although the experience of single-page applications is excellent, SEO is indeed shortcomings.

Therefore, SSR came into being.

React With Next, Vue also has Nuxt.

However, every brother who is determined to do a good job in "SSR" may have to have a clear enough understanding: this is a deep pit, so proceed with caution.

In 2022, SSR will still be in strong demand from many companies. vue Currently, there is no better in SSR Nuxt is a more capable opponent, so you can still trust its performance this year.

6. vite: Fast is good

webpack is indeed good, but it is slow in development.

Official website: https://vitejs.cn/

Vite (pronounced similar to [weɪt], French, fast (meaning) is a web development build tool driven by native ES Module. It is developed based on the browser's native ES imports in the development environment and packaged based on Rollup in the production environment.

Who will be the king of front-end construction in 2022? My answer is "webpack". (vite: Are you praising others on my site?)

But webpack’s market will definitely be cannibalized by vite, especially for small and medium-sized applications.

Why? Just because it’s “fast”!

The most attractive aspect of webpack 5 is the "module federation", which establishes webpack 5's leadership in micro-application scenarios.

But not everyone needs "module federation". What many companies need is SPA, which is short, easy and fast, and can be used once you get started.

You said: vue-cli@next will be based on vite. (Experience it for yourself...) The growth of

vite is far from reaching its peak, and 2022 is worth looking forward to!

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of 6 vue libraries worth knowing about in 2022 ['explosion']. For more information, please follow other related articles on the PHP Chinese website!