Rilasciato · in miglioramento
Framework · Dal 2014
Vue.js è un framework JavaScript progressivo per creare interfacce con componenti dichiarativi; Nuxt aggiunge routing, rendering lato server e API.
Vue.js è un framework JavaScript open source per costruire interfacce utente, creato da Evan You e pubblicato per la prima volta nel 2014. Unisce template basati su HTML a uno stato reattivo, così la pagina si aggiorna da sola quando cambiano i dati; la sua unità di base è il componente a file singolo (.vue), che riunisce template, script e stili. Nuxt è un framework full stack costruito su Vue che aggiunge routing basato sui file, import automatici, rendering lato server e API server basate sul motore Nitro.
Vue si può adottare in modo graduale: da un singolo tag script che rende interattiva una parte di una pagina esistente fino a un'applicazione a pagina singola completa costruita con Vite. È particolarmente adatto a schermate molto interattive come pannelli di amministrazione, dashboard e strumenti interni. Quando contano la visibilità sui motori di ricerca e la velocità del primo caricamento, o quando si vogliono pagine e API in un unico progetto, Nuxt offre rendering lato server, generazione statica e route server, e si distribuisce su server Node.js, hosting statico e molte altre destinazioni.
Per iniziare, installa Node.js e segui il tutorial interattivo e la guida del sito ufficiale per imparare reattività, componenti e sintassi dei template. Poi crea un progetto basato su Vite con npm create vue@latest e costruisci schermate reali; quando servono convenzioni di routing e rendering lato server, passa a Nuxt. Pinia per la gestione dello stato e Vitest per i test unitari sono gli strumenti raccomandati ufficialmente.
Lo stato dichiarato con ref, reactive e computed traccia le proprie dipendenze, quindi quando un valore cambia viene ridisegnata solo la parte della pagina che lo usa.
Template, script e stili stanno in un unico file .vue, con stili a portata limitata e supporto TypeScript fin da subito.
La logica correlata si raggruppa in funzioni e si riutilizza come composable, mantenendo ordinati anche i componenti più grandi.
Routing basato sui file, import automatici, rendering lato server, generazione statica e route API nella cartella server funzionano senza configurazione aggiuntiva.
Gli strumenti di Vue e Nuxt girano su Node.js. Installa la versione LTS da nodejs.org e verifica che node e npm mostrino la propria versione.
node --version && npm --versionLo strumento ufficiale create-vue chiede se aggiungere TypeScript, Vue Router, Pinia, Vitest e altro. Nella nuova cartella esegui npm install e poi npm run dev per avviare il server di sviluppo Vite.
npm create vue@latestPer usare Nuxt, genera un progetto con nuxi. Entra nella nuova cartella ed esegui npm run dev; il server di sviluppo è in ascolto per impostazione predefinita su http://localhost:3000.
npx nuxi@latest init my-nuxt-appsrc/App.vue è il componente radice di un progetto create-vue. Il blocco script setup crea un contatore reattivo count con ref(0); il template lo mostra tra doppie parentesi graffe e lo incrementa a ogni clic tramite @click. Quando count cambia, Vue ridisegna solo ciò che ne dipende. Con npm run dev avviato, ogni modifica salvata compare subito nel browser.
src/App.vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<h1>Hello, Vue!</h1>
<button @click="count++">Clicked {{ count }} times</button>
</template>
npm create vue@latest hello-vue && cd hello-vue && npm install && npm run devSei capitoli che ti accompagnano dall'installazione ai concetti chiave di Vue.js · Nuxt.
Fai domande, condividi la tua esperienza e scambia opinioni su Vue.js · Nuxt.
Ancora nessuna discussione. Avvia la prima.
0 commenti
Accedi · Accedi per lasciare un commento.
Scrivi tu il primo commento.