Hai bisogno di moduli per il tuo prossimo progetto? Ecco come creare moduli con FormKit.
I moduli sono il gateway che consente agli utenti di interagire con la tua applicazione e di fornire dati essenziali per attività come la creazione di account, l'elaborazione dei pagamenti e la raccolta di informazioni. Ma la creazione di moduli può essere un compito arduo, che richiede un codice boilerplate esteso che richiede tempo ed è soggetto a errori
FormKit offre una soluzione fornendo componenti predefiniti che eliminano la necessità di codice boilerplate. Ecco come usarlo.
Che cos'è FormKit?
FormKit è un framework di creazione di moduli open source sviluppato appositamente per Vue 3, progettato per semplificare il processo di creazione di moduli di alta qualità pronti per la produzione. È una versione migliorata del popolare Vue Formula libreria e fornisce oltre 25 opzioni di input personalizzabili e accessibili, insieme a un set predefinito di regole di convalida.
FormKit offre anche la possibilità di generare moduli tramite schemi dinamici compatibili con JSON, semplificando la creazione rapida di moduli complessi. Inoltre, FormKit ha una community attiva su Discord, che fornisce supporto e promuove la collaborazione tra gli utenti. Con le sue funzionalità complete e il sistema di supporto, FormKit è uno strumento affidabile ed efficiente per gli sviluppatori che desiderano creare moduli per i loro progetti Vue 3.
Funzionalità del framework FormKit
Troverai un'ampia selezione di funzionalità per la creazione di moduli in FormKit.
1. API a componente singolo
Una delle caratteristiche interessanti di FormKit è la sua API a componente singolo: componente. Ti dà accesso a tutti i tipi di input. Ciò offre un accesso diretto e facile alla creazione di elementi del modulo invece di dover utilizzare elementi HTML nativi.
2. Regole di convalida predefinite
Formkit semplifica la gestione delle convalide dei moduli consentendoti di applicare direttamente un insieme di regole agli input utilizzando il prop di convalida. Ha oltre 30 diverse regole predefinite che puoi selezionare in base alle tue preferenze. In alternativa, puoi creare regole personalizzate registrate globalmente o specificatamente sull'input per restrizioni complesse.
3. Opzioni di stile personalizzabili
FormKit non ha opzioni di stile predefinite ma ha un tema di base opzionale: Genesis. Devi installarlo separatamente.
Installando prima il file @formkit/temi pacchetto.
installazione npm @formkit/themesQuindi importalo nel tuo progetto
importare'@formkit/themes/genesis'Altre opzioni di stile includono l'uso di classi personalizzate che ti consentono di applicare i tuoi stili e le tue classi al markup fornito da FormKit.
4. Generazione di schemi
La generazione dello schema di FormKit è un'eccellente funzionalità che semplifica il processo di creazione dei campi del modulo. Uno schema è un array di oggetti, con ogni oggetto che rappresenta un elemento HTML e puoi rappresentare solo in formato JSON.
L'array dello schema è costituito da oggetti nodo FormKit che corrispondono a vari elementi, ad esempio elementi HTML, componenti o nodi di testo. Questi oggetti possono fare riferimento a variabili Vue preesistenti e rendere qualsiasi markup o componente con attributi e oggetti di scena modificabili, rendendolo un metodo efficiente per costruire e personalizzare i moduli. Per impostazione predefinita, non è registrato a livello globale, quindi è necessario importarlo.
importare {FormKitSchema} da'@formkit/vue'Integrazione di FormKit in Vue3
Per iniziare a utilizzare FormKit in un'applicazione Vue 3, per prima cosa installalo all'interno del tuo progetto. Questa sezione coinvolgerà una demo utilizzando una nuova applicazione vue da zero.
Prerequisiti per l'utilizzo di FormKit
Prima di iniziare, assicurati di avere quanto segue:
- Comprensione fondamentale di Vue e JavaScript
- Node.js e npm configurati sul tuo computer
Una volta che sei al passo con i tempi, sei pronto per creare la tua prima app.
Creazione di una nuova applicazione Vue
Innanzitutto, esegui il comando seguente nel tuo terminale per inizializzare una nuova applicazione Vue:
npm init vue@ultimoQuindi seguire i passaggi specificati nel prompt in base alle proprie preferenze. Dopo che il progetto è stato completamente installato, procedere con l'installazione di FormKit nell'applicazione.
installazione npm @formkit/vue Successivamente, nel principale.js file.
importare {creaApp} da'vista'
importare'./stile.css'
importare App da'./App.vue'
// Imposta Formkit
importare { plug-in, configurazione predefinita } da"@formkit/vue";
// Importa il tema Genesis
importare"@formkit/themes/genesis";
createApp (App).use(collegare, defaultConfig).mount('#app')Il pacchetto @formkit/vue viene fornito in bundle con un plug-in Vue e una configurazione configurata predefinita per un'installazione senza interruzioni. Una volta completata la configurazione, sei pronto per incorporare il file componente nella tua applicazione Vue 3. Inoltre, puoi aggiungere la configurazione per i temi Genesis come affermato in precedenza.
Creazione di moduli riutilizzabili con FormKit
Questa sezione mostra come utilizzare FormKit per creare un modulo funzionale e personalizzabile creando un semplice modulo di registrazione.
Per una migliore struttura del codice, è bene creare un file separato per questo componente: Modulo di registrazione.vue
Innanzitutto, definisci l'elemento di input usando questo formato
tipo="testo"
etichetta="Nome di battesimo"
segnaposto="Abiola"
validazione="richiesto|lunghezza: 4"
aiuto = "Inserisci un minimo di 4 caratteri"
<FormKit/>Questo codice mostra come utilizzare FormKit per generare un input di testo utilizzando un tipo di testo. La prop di convalida separa le regole usando il simbolo pipe "|". L'help prop posiziona un piccolo testo appena sotto l'elemento di input.
Inoltre, puoi esplorare altri tipi di input come quelli di seguito.
tipo="testo"
etichetta="Cognome"
segnaposto="Ester"
validazione="richiesto|lunghezza: 4"
aiuto = "Inserisci un minimo di 4 caratteri"
/>
tipo="e-mail"
etichetta="Indirizzo e-mail"
icona-prefisso="e-mail"
validazione="richiesto|e-mail"
segnaposto="[email protected]"
/>
tipo="data"
etichetta="Data di nascita"
aiuto="Inserisci la tua data di nascita nel formato GG/MM/AAAA"
validazione="necessario"
/> modello v="valore"
tipo="Radio"
etichetta="Genere"
:opzioni="['Maschio femmina']"
aiuto="Seleziona il tuo genere"
/>
tipo="file"
etichetta="Carica la tua foto"
accettare=".jpg,.png,.jpeg"
aiuto="Seleziona la tua immagine"
/>
Il codice mostra come utilizzare alcuni degli altri elementi di input e impostare le regole di convalida.
FormKit include un oggetto di tipo chiamato "form" che esegue il wrapping di tutti gli elementi di input. Monitora lo stato di convalida del modulo e impedisce agli utenti di inviarlo se gli input non sono validi. Inoltre, genera automaticamente un pulsante di invio.
tipo="modulo"
modulo-classe="contenitore esterno"
invia-etichetta="Registrati"
@invia="Registrati">
Combinando tutto insieme presenta il modulo completo, come mostrato nell'immagine qui sotto.
Generazione di moduli utilizzando lo schema di FormKit
Con gli schemi JSON è possibile generare moduli simili agli elementi di input, come fatto in precedenza. Per generare il modulo, fornisci semplicemente l'array dello schema al file componente utilizzando il schema puntello.
La matrice dello schema
cost schema = [
{
$modulo: "e-mail",
nome: "e-mail",
etichetta: "Indirizzo e-mail",
segnaposto: "Inserisci il tuo indirizzo email",
convalida: "richiesto|e-mail",
},
{
$modulo: 'parola d'ordine',
nome: 'parola d'ordine',
etichetta: 'Parola d'ordine',
convalida: 'richiesto|lunghezza: 5,16'
},
{
$modulo: 'parola d'ordine',
nome: 'conferma la password',
etichetta: 'Conferma password',
convalida: 'richiesto|conferma',
validationLabel: 'conferma password',
},
];Viene quindi passato all'elica nel componente FormKit.
"modulo" modulo-classe="contenitore esterno"submitlabel="Login">
<FormKitSchema:schema="schema" />
FormKit> Questo è l'output finale generato:
Un approccio più rapido alla creazione di moduli in Vue3
FormKit fornisce un approccio più rapido ed efficiente alla creazione di moduli in Vue 3. Con FormKit, puoi eliminare la necessità di creare modelli boilerplate da zero, permettendoti di concentrarti sull'implementazione diretta della logica. Questo processo semplificato non solo consente di risparmiare tempo, ma migliora anche la produttività.
Inoltre, FormKit consente il rendering dinamico dei moduli tramite il rendering condizionale. Questa funzione consente di creare interfacce interattive e intuitive per gli utenti, in cui gli elementi del modulo vengono visualizzati o nascosti in base a determinate condizioni.
