close

Modello di blog di base Nuxt 3 – Blog di base Nuxtjs di Bfotool(Vue 3 + TypeScript + Tailwind)

Se stai cercando un moderno template per blog Nuxt 3, Bfotool Nuxtjs Base Blog è un'ottima soluzione. Si tratta di un'applicazione blog completamente funzionale, realizzata con Nuxt 3, Vue 3, TypeScript e Tailwind CSS, progettata per aiutare gli sviluppatori a creare rapidamente un blog professionale senza bisogno di un backend durante lo sviluppo.

Il progetto include un livello API fittizio basato sugli intercettori Axios, che simula una vera API REST. Questo lo rende perfetto per apprendere l'architettura Nuxt, prototipare applicazioni o creare piattaforme di blog pronte per la produzione.

Puoi esplorare il repository qui: 👉 https://github.com/bfotool/nuxtjs-base-blog

Che cos'è Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog è un moderno modello di applicazione per blog, realizzato utilizzando le più recenti tecnologie frontend. Offre un'interfaccia di blogging completa con post, categorie, funzionalità di ricerca e pagine di contatto.

Il progetto è stato ideato con un'architettura Nuxt 3 pulita, che lo rende facile da comprendere ed estendere.

I punti salienti principali includono:

  • Interfaccia utente completa del blog con design reattivo

  • API REST fittizia per lo sviluppo senza backend

  • Realizzato con la moderna API di composizione Vue 3

  • Sviluppo type-safe con TypeScript

  • Meta-configurazione pronta per SEO

  • Supporto per temi chiari e scuri

Il repository può essere trovato qui:

👉 https://github.com/bfotool/nuxtjs-base-blog

Questo modello è ideale per:

  • Blog personali

  • Blog aziendali

  • Portafogli degli sviluppatori

  • Apprendimento dell'architettura di Nuxt 3

  • Prototipazione rapida di siti web di contenuti

Caratteristiche principali

C class="ac-h3"Pagine del blog complete

Il modello include un set completamente implementato di pagine solitamente richieste in una piattaforma blog.

Le pagine principali includono:

  • Home page: mostra un post di un eroe in evidenza, filtri di categoria e post suddivisi in pagine

  • Pagina del post del blog: visualizzazione completa dell'articolo con indice e post correlati

  • Pagina categoria: sfoglia i post filtrati per categoria

  • Pagina di ricerca: ricerca in tempo reale con funzionalità anti-rimbalzo

  • Pagina Informazioni: presenta il tuo team, la tua missione o il tuo marchio

  • Pagina dei contatti – Modulo di contatto con convalida e feedback tramite toast

  • Pagina di errore: interfaccia utente personalizzata per la gestione degli errori

Questa struttura fornisce agli utenti un'esperienza di blog pronta all'uso .

< class="ac-h3"h3>Livello API falso per lo sviluppo

Una delle caratteristiche più potenti di questo progetto è il sistema API fittizio .

Invece di connettersi a un backend reale, il progetto simula le risposte API utilizzando gli intercettori Axios .

Questo approccio consente agli sviluppatori di:

  • Crea funzionalità frontend senza dipendenze backend

  • Test di impaginazione, filtraggio e ordinamento

  • Simula ritardi di risposta API reali

  • Passa facilmente a un backend reale in un secondo momento

L'API fittizia include endpoint quali:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Poiché l'API è astratta tramite useApi composable, il passaggio a un backend reale richiede una configurazione minima.

Architettura moderna di Nuxt 3

Il progetto segue i modelli di sviluppo consigliati da Nuxt 3, il che lo rende un ottimo riferimento per gli sviluppatori che stanno imparando il framework.

Le caratteristiche architettoniche importanti includono:

  • Componenti e componibili importati automaticamente

  • Sviluppo TypeScript-first

  • Livello di servizio API componibile

  • Struttura modulare delle cartelle

  • Meta-configurazione SEO

  • Transizioni di pagina

L'applicazione utilizza anche:

  • useSeoMeta()per i tag SEO

  • useColorMode()per cambiare tema

  • useRoute()e altri componenti componibili Nuxt integrati

< class="ac-h3"h3>Modalità scura e design reattivo

L'interfaccia utente supporta temi chiari e scuri utilizzando @nuxtjs/color-mode.

Le caratteristiche includono:

  • Rilevamento automatico del tema del sistema

  • Attivazione manuale del tema

  • Stile CSS di Tailwind

  • Layout reattivo per dispositivi mobili

Ciò garantisce che il blog funzioni senza problemi su:

  • Scrivania

  • Compresse

  • Dispositivi mobili

P class="ac-h3"Funzionalità del blog potenti

Il modello di blog include numerose funzionalità avanzate solitamente presenti nelle piattaforme di blog di produzione.

Tra questi:

  • Indice generato dalle intestazioni markdown

  • Suggerimenti per post correlati

  • Tempo di lettura stimato

  • Filtraggio per categoria

  • Ricerca full-text non valida

  • Paginazione intelligente

  • Notifiche toast

  • Caricamento dei componenti dello scheletro

  • Transizioni di pagina animate

Queste caratteristiche creano un'esperienza di lettura moderna per i visitatori del blog.

Stack tecnologico

Il progetto è realizzato utilizzando uno stack frontend moderno.

Strato Tecnologia
Struttura Nuxt 3.15
Libreria UI Vista 3.5
Lingua TypeScript 5.7
Stile CSS 3.4 di Tailwind
Gestione dello Stato Pinia
Cliente HTTP Axios
Icone Iconifica tramite @nuxt/icon
Tema @nuxtjs/modalità-colore
Linting ESLint
Formattazione Più carino

Questo stack garantisce prestazioni, scalabilità e manutenibilità .

Panoramica della struttura del progetto

Il repository segue una struttura pulita e organizzata.

Le directory importanti includono:

Pagine

La pagesdirectory definisce i percorsi principali:

  • index.vue– Pagina iniziale

  • about.vue– Pagina Informazioni

  • contact.vue– Modulo di contatto

  • search.vue– Interfaccia di ricerca

  • blog/[slug].vue– Pagina del post del blog

  • blog/category/[slug].vue– Pagina della categoria

Com class="ac-h3"componenti

I componenti dell'interfaccia utente riutilizzabili sono raggruppati in categorie logiche:

  • layout– Intestazione e piè di pagina

  • common– Paginazione, caricatori scheletro, notifiche toast

  • blog– Componenti specifici del blog come cartoline e indice

Classe comp="ac-h3"osables

La directory composables contiene logica riutilizzabile.

Tra i componibili importanti troviamo:

  • useApi()– Livello di servizio API tipizzato

  • useDebounce()– Valori reattivi di debounce

< class="ac-h3"h3>Livello API fittizio

Il sistema fittizio si trova all'interno della mocksdirectory.

Contiene:

  • handlers.ts– Intercettori di richiesta API

  • posts.ts– Esempi di post del blog

  • authors.ts– Dati dell'autore

  • categories.ts– Dati di categoria

Questa struttura rende il progetto facile da modificare ed estendere .

Come installare ed eseguire il progetto

Per eseguire il progetto in locale, seguire questi passaggi.

Prereq class="ac-h3"uisites

Hai bisogno di:

  • Node.js 18.17 o successivo

  • npm, yarn o pnpm

Clona il repository

git clone https://github.com/bfotool/nuxtjs-base-blog.git 
cd nuxtjs-base-blog

class="ac-h3"Installa dipendenze

npm install

Avvia il server di sviluppo

npm run dev

Quindi apri il tuo browser all'indirizzo:

http://localhost:3000

Il server di sviluppo Nuxt si ricaricherà automaticamente quando i file cambiano.

Passaggio da Mock API a Real API

Una delle migliori decisioni di progettazione in questo progetto è il semplice passaggio da un'API all'altra .

Per connettere un backend reale:

  1. Imposta la variabile d'ambiente:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Configura l'URL di base della tua API:

NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com

  1. Assicurati che la risposta del backend corrisponda ai tipi definiti in:

types/index.ts

Non sono necessarie ulteriori modifiche al codice.

Personalizzazione del blog

Gli sviluppatori possono personalizzare facilmente il modello.

Cambia tema o stili

Modifica la configurazione di Tailwind:

tailwind.config.ts

Gli stili globali si trovano in:

assets/css/main.css

Modifica il contenuto del blog

Il contenuto fittizio può essere aggiornato in:

mocks/posts.ts 
mocks/categories.ts 
mocks/authors.ts

Ciò consente di creare rapidamente prototipi di diversi set di dati di blog.

Aggiorna le impostazioni dell'app

Le costanti dell'applicazione, come navigazione, branding e link social, sono memorizzate in:

utils/constants.ts

Perché utilizzare questo modello di blog Nuxt?

Questo progetto è un'ottima scelta per gli sviluppatori perché offre:

  • Architettura pulita di Nuxt 3

  • Struttura del codice a livello di produzione

  • API fittizia per lo sviluppo frontend

  • Interfaccia utente moderna con Tailwind CSS

  • Pagine pronte per SEO

  • Facile integrazione con API reali

Funziona sia come progetto di apprendimento sia come base per un blog pronto per la produzione .

Repository GitHub

Puoi esplorare il codice sorgente completo qui: 👉 https://github.com/bfotool/nuxtjs-base-blog

Se ritieni che il progetto sia utile, valuta la possibilità di contrassegnare il repository con una stella e di contribuire ai miglioramenti.