6 perpustakaan vue yang patut diketahui pada tahun 2022 ['letupan']

Artikel ini akan berkongsi dengan anda 6 perpustakaan berkaitan vue yang patut diketahui 6 perpustakaan ini berkemungkinan besar akan "meletup" pada tahun 2022. Datang dan kumpulkan mereka untuk mengetahui lebih lanjut.

2022 Apakah kuda hitam baharu yang akan muncul dari bulatan bahagian hadapan? Tiada siapa yang tahu ini.

Tetapi mengikut pemahaman peribadi saya, perpustakaan berikut yang berkaitan dengan 6款 dan vue berkemungkinan besar akan "meletup" atau "terus meletup" pada tahun 2022! Jom belajar cepat! [Cadangan berkaitan: tutorial video vue.js]

1. vueuse: Set alat eksklusif untuk pembangun vue!

Alamat tapak web rasmi: https://vueuse.org/

Set alat fungsi berdasarkan gabungan API Vue.

Dalam mana-mana persekitaran di mana Vue Composition Api (API gabungan) boleh digunakan, anda boleh meningkatkan kecekapan pembangunan anda dengan memasang pustaka alat vueuse (tiada Salah, kedua-duanya vue2.x dan vue3.x boleh dimainkan).

boleh difahami sebagai vue eksklusif lodash! Terdapat terlalu banyak, anda tidak boleh memikirkannya, tetapi anda tidak boleh menggunakannya!

Secara amnya, fungsi alat disediakan dalam kategori berikut:

Animasi

• Pelayar
• Komponen
• Format Kimia
• Penderia
• Negeri (mesin negeri)
• Kaedah awam
• Mendengar
• Pelbagai
• Mengambil diri saya sebagai contoh,

ialah kaedah super praktikal yang baru-baru ini saya gunakan secara meluas dalam

pembangunan projek sebenaruseTemplateRefsList.

useTemplateRefsList:

Kaedah ini boleh membantu anda mengikat dengan cepat komponen ref dalam gelung vue3 组件式 api. Berfikir lebih teliti daripada menyedarinya sendiri. forSelain itu, terdapat semua jenis alatan berguna, seperti

,

<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>

,

, dll., semuanya menunggu untuk ditemui oleh semua orang. useVModeluseIntervalRingkasnya, ini ialah perpustakaan alat yang membolehkan anda useCssVarberhenti kerja lebih awal

.

2. : Lebih berguna

perpustakaan (

produk pesaing) Piniavue storevuexDunia sedang menderita

Sudah lama!

vuex

Alamat laman web rasmi: https://pinia.vuejs.org/

Fikirkan hari-hari itu,

dengan "rasmi kelulusan, terutamanya Reputasi "Diturunkan secara peribadi daripada nenek moyang kita" secara eksklusif menduduki takhta pengurusan status, tetapi terlalu ramai orang secara peribadi mengalami "kerumitan" dan "kesulitan" reka bentuknya apabila menggunakannya.

Saya melukis kartun untuk meluahkan perasaan saya:

vuexvue

Jadi, apakah kelebihan ?

PiniaIa tidak perlu mendaftar

!

• MutationIa menyokong keupayaan untuk meningkatkan Action melalui pemalam. state

• Sokongan

  yang baik. Pinia

• Sokongan pemaparan sebelah pelayan.

  Typescript

Definisi:

• Penggunaan:

Tidakkah ia kelihatan lebih ringan daripada menggunakan

?

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

Dikatakan bahawa

juga merujuk kepada idea reka bentuk

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

dalam reka bentuk API, yang juga menunjukkan bahawa

juga telah diiktiraf secara rasmi vuex

vuex 5.xPiniaPinia Oleh itu,
sememangnya berbaloi untuk dipelajari, dan ia juga merupakan rangka kerja yang berpotensi besar untuk menjadi popular pada

tahun.

3.

: Mengapakah sekuel ortodoks

Pinia2022

dipanggil

dan bukannya Element Plus? ElementUI 3.0

Ini kisah Li Kui dan Li Gui, semua orang faham. ElementUI 2.xElement PlusElement 3.0

Alamat tapak web rasmi: https://element-plus.gitee.io/zh-CN/

berkata

ialah

Versi yang paling terkenal dan tersebar luas di kalangan , saya rasa kebanyakan orang dalam industri harus mengenalinya.

Kini vue3 telah menjadi versi rasmi vue Dengan pertambahan vue3 pengguna, Element Plus sudah pasti akan memulakan tempoh pertumbuhan yang pesat.

Element Plus Apakah kelebihannya?

• API dan Element UI 2.x sangat konsisten, dengan pemindahan kod dan kos pembelajaran yang rendah.

• 核心实现 sangat serupa dengan Element UI 2.x, seperti PopupManager yang saya perkenalkan.

• Gunakan mod definisi gaya css var untuk menjadikan penukaran gaya lebih lancar.

• Pasukan penyelenggaraan yang dipercayai.

Boleh diramalkan dengan berani bahawa Element-Plus ia akan tetap popular pada tahun 2022.

4. Navie UI: Pustaka komponen yang disyorkan oleh Anda secara peribadi

Bukan KPI berfungsi, dengan gaya yang menarik, komponen yang lengkap dan gaya penulisan yang mesra.

Tapak web rasmi: https://www.naiveui.com/zh-CN/os-theme

Walaupun hanya dalam beberapa projek kecil dan Demo digunakan dalam Navie UI, tetapi projek ini benar-benar menggembirakan orang ramai.

Ia datang daripada sumber terbuka rangka kerja yang digunakan sendiri oleh sebuah syarikat bernama "Tucson".

"Navie UI" daripada "Tucson", emmm....

Mari kita senaraikan secara ringkas sorotan rangka kerja ini:

• Kesempurnaan dan kekayaan komponen sangat mengagumkan.

• Sokongan kupasan dan tema sangat bagus.

• Sokongan TypeScript yang sangat baik. TS YYDS!

Saya secara peribadi sangat menyukai projek ini, tetapi sejauh mana ia boleh pergi benar-benar memerlukan masa untuk disahkan.

Semoga ia dapat disukai dan digunakan oleh lebih ramai orang pada tahun 2022!

5. Nuxt: SSR Harapan seluruh kampung

Aplikasi satu halaman bagus, tetapi lambat dimuatkan dan mempunyai skor SEO yang rendah.

Pada masa ini, apabila React dan Vue adalah dua syarikat dominan (Angular: "Bagaimana dengan saya?"), kami mahukan web satu halaman Aplikasi (SPA) terlalu mudah.
Tetapi ia juga menimbulkan masalah lain: Walaupun aplikasi satu halaman mempunyai pengalaman yang sangat baik, SEO ia mempunyai kekurangan.

Oleh itu, SSR wujud.

React Dengan Next, Vue juga mempunyai Nuxt.

Namun, setiap saudara yang berazam untuk melakukan kerja yang baik dalam "SSR" mungkin perlu mempunyai pemahaman yang cukup jelas: ini adalah lubang yang dalam, jadi teruskan dengan berhati-hati.

Pada tahun 2022, SSR masih mendapat permintaan yang tinggi daripada banyak syarikat vue Pada masa ini, tiada saingan yang lebih berkemampuan daripada SSR dalam bidang Nuxt, jadi kami masih boleh. percaya bahawa ia akan mendapat permintaan pada tahun ini.

6. vite: Cepat itu bagus

Pek web memang bagus, tetapi ia lambat dalam pembangunan.

Tapak web rasmi: https://vitejs.cn/

Vite (sebutan serupa dengan [weɪt], Perancis, cepat (maksudnya) ialah alat binaan pembangunan web yang didorong oleh Modul ES asli. Ia dibangunkan berdasarkan import ES asli penyemak imbas dalam persekitaran pembangunan dan dibungkus berdasarkan Rollup dalam persekitaran pengeluaran.

Siapakah yang akan menjadi raja pembinaan bahagian hadapan pada tahun 2022? Jawapan saya ialah "webpack". (vite: Adakah anda memuji orang lain di tapak saya?)

Tetapi pasaran webpack pasti akan dimakan oleh vite, terutamanya untuk aplikasi bersaiz kecil dan sederhana.

Kenapa? Hanya kerana ia "cepat"!

webpack 5 Bahagian yang paling menarik ialah "persekutuan modul", yang mewujudkan kepimpinan webpack 5 dalam senario aplikasi mikro.

Tetapi tidak semua orang memerlukan "persekutuan modul". Terdapat banyak syarikat yang memerlukan hanya SPA, yang pendek, mudah dan cepat, dan boleh dilakukan sebaik sahaja anda bermula.

Anda berkata: vue-cli@next akan berdasarkan vite. (Alami sendiri...) Pertumbuhan

vite masih jauh dari mencapai kemuncaknya, dan 2022 patut ditunggu!

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci 6 perpustakaan vue yang patut diketahui pada tahun 2022 ['letupan']. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!