Șablon de blog Nuxt 3 Base – Bfotool Nuxtjs Base Blog(Vue 3 + TypeScript + Tailwind)

Dacă sunteți în căutarea unui șablon modern de blog Nuxt 3, Bfotool Nuxtjs Base Blog este o soluție excelentă. Este o aplicație de blog complet funcțională, construită cu Nuxt 3, Vue 3, TypeScript și Tailwind CSS, concepută pentru a ajuta dezvoltatorii să construiască rapid un blog profesional fără a fi nevoie de un backend în timpul dezvoltării.

Proiectul include un strat API fals, alimentat de interceptori Axios, care simulează un API REST real. Acest lucru îl face perfect pentru învățarea arhitecturii Nuxt, prototiparea aplicațiilor sau construirea de platforme de blog pregătite pentru producție.

Puteți explora depozitul aici: 👉 https://github.com/bfotool/nuxtjs-base-blog

Ce este blogul de bază Bfotool Nuxtjs?

Bfotool Nuxtjs Base Blog este un șablon modern pentru aplicații de blog, construit folosind cele mai recente tehnologii frontend. Acesta oferă o interfață completă pentru blogging, cu postări, categorii, funcționalități de căutare și pagini de contact.

Proiectul este conceput cu o arhitectură Nuxt 3 curată, ceea ce îl face ușor de înțeles și de extins.

Printre aspectele cheie se numără:

Interfață completă pentru blog cu design responsiv
API REST simulat pentru dezvoltare fără backend
Construit cu API-ul modern Vue 3 Composition
Dezvoltare sigură pentru tipuri cu TypeScript
Configurație meta optimizată pentru SEO
Suport pentru teme întunecate și luminoase

Depozitul poate fi găsit aici:

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

Acest șablon este ideal pentru:

Bloguri personale
Bloguri de companie
Portofolii de dezvoltatori
Învățarea arhitecturii Nuxt 3
Prototipizare rapidă a site-urilor web de conținut

Caracteristici cheie

C class="ac-h3"Pagini complete de blog

Șablonul include un set complet implementat de pagini, de obicei necesare într-o platformă de blog.

Paginile principale includ:

Pagina principală – Afișează o postare principală recomandată, filtre de categorie și postări paginate
Pagina de articole de blog – Vizualizare completă a articolului cu cuprins și articole conexe
Pagina de categorii – Răsfoiți postările filtrate după categorie
Pagină de căutare – Căutare în timp real cu funcționalitate debounce
Pagina Despre – Prezentați-vă echipa, misiunea sau brandul
Pagină de contact – Formular de contact cu validare și feedback
Pagină de eroare – Interfață de utilizare personalizată pentru gestionarea erorilor

Această structură oferă utilizatorilor o experiență de blog gata de utilizare .

<class="ac-h3"h3>Strat API fals pentru dezvoltare

Una dintre cele mai puternice caracteristici ale acestui proiect este sistemul API mock .

În loc să se conecteze la un backend real, proiectul simulează răspunsurile API folosind interceptori Axios .

Această abordare permite dezvoltatorilor să:

Construiți funcționalități frontend fără dependențe backend
Testarea paginației, filtrării și sortării
Simulează întârzieri reale de răspuns API
Treceți cu ușurință la un backend real mai târziu

API-ul mock include puncte finale precum:

/posts
/posts/featured
/posts/:slug
/categories
/authors
/contact

Deoarece API-ul este abstractizat prin intermediul componentei compozabile useApi, trecerea la un backend real necesită o configurare minimă.

Arhitectură modernă Nuxt 3

Proiectul urmează modelele de dezvoltare Nuxt 3 recomandate, ceea ce îl face o referință excelentă pentru dezvoltatorii care învață framework-ul.

Printre caracteristicile arhitecturale importante se numără:

Componente și elemente compozabile importate automat
Dezvoltare TypeScript-first
Stratul de servicii API compozabil
Structură modulară de foldere
Configurarea meta SEO
Tranziții de pagină

Aplicația folosește și:

useSeoMeta()pentru etichete SEO
useColorMode()pentru schimbarea temei
useRoute()și alte componente compozabile Nuxt încorporate

Mod întunecat și design responsiv

Interfața cu utilizatorul acceptă teme întunecate și luminoase folosind @nuxtjs/color-mode.

Caracteristicile includ:

Detectarea automată a temei de sistem
Comutare manuală a temei
Stilizarea CSS Tailwind
Aspect responsiv pentru mobil(mobile first)

Acest lucru asigură funcționarea perfectă a blogului în următoarele aspecte:

Desktop
Tablete
Dispozitive mobile

Funcții puternice ale blogului P class="ac-h3"

Șablonul de blog include mai multe funcții avansate întâlnite de obicei în platformele de bloguri de producție.

Acestea includ:

Cuprins generat din titlurile markdown
Sugestii de postări similare
Timp estimat de citire
Filtrare pe categorii
Căutare full-text deblocată
Paginare inteligentă
Notificări Toast
Încărcarea componentelor scheletului
Tranziții de pagină animate

Aceste caracteristici creează o experiență de citire modernă pentru vizitatorii blogului.

Stiva tehnologică

Proiectul este construit folosind un stack frontend modern.

Strat	Tehnologie
Cadru	Nuxt 3.15
Bibliotecă UI	Vue 3.5
Limbă	TypeScript 5.7
Stilizare	Tailwind CSS 3.4
Managementul statului	Pinia
Client HTTP	Axios
Pictograme	Iconifică prin @nuxt/icon
Temă	@nuxtjs/mod-de-culoare
Scămoșuri	ESLint
Formatare	Mai frumoasă

Această stivă oferă performanță, scalabilitate și mentenabilitate .

Prezentare generală a structurii proiectului

Depozitul urmează o structură curată și organizată.

Directoarele importante includ:

Pagini

Directorul pagesdefinește rutele principale:

index.vue– Pagina principală
about.vue– Pagina Despre
contact.vue– Formular de contact
search.vue– Interfață de căutare
blog/[slug].vue– Pagină de postare pe blog
blog/category/[slug].vue– Pagina de categorii

Com class="ac-h3"components

Componentele reutilizabile ale interfeței utilizator sunt grupate în categorii logice:

layout– Antet și subsol
common– Paginare, încărcătoare schelet, notificări toast
blog– Componente specifice blogului, cum ar fi cărți poștale și cuprins

Clasa de comp="ac-h3"osabile

Directorul composables conține logică reutilizabilă.

Printre materialele compozabile importante se numără:

useApi()– Stratul de servicii API tipizat
useDebounce()– Deblocarea valorilor reactive

Strat API simulat

Sistemul mock se află în mocksdirector.

Acesta conține:

handlers.ts– Interceptoare de cereri API
posts.ts– Exemple de postări pe blog
authors.ts– Date despre autor
categories.ts– Date despre categorii

Această structură face ca proiectul să fie ușor de modificat și extins .

Cum se instalează și se execută proiectul

Urmați acești pași pentru a rula proiectul local.

Clasa de cerințe preliminare="ac-h3"uisites

Ai nevoie de:

Node.js 18.17 sau o versiune ulterioară
npm, fire sau pnpm

Clonează Repozitoriul

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

class="ac-h3"Instalare dependențe

npm install

Porniți serverul de dezvoltare

npm run dev

Apoi deschideți browserul la adresa:

http://localhost:3000

Serverul de dezvoltare Nuxt se va reîncărca automat când fișierele se modifică.

Trecerea de la API-ul Mock la API-ul Real

Una dintre cele mai bune decizii de design din acest proiect este schimbarea ușoară a API-ului .

Pentru a conecta un backend real:

Setați variabila de mediu:

NUXT_PUBLIC_USE_MOCK_API=false

Configurați adresa URL de bază a API-ului:

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

Asigurați-vă că răspunsul backend corespunde tipurilor definite în:

types/index.ts

Nu sunt necesare modificări suplimentare de cod.

Personalizarea blogului

Dezvoltatorii pot personaliza cu ușurință șablonul.

Schimbați tema sau stilurile

Editați configurația Tailwind:

tailwind.config.ts

Stilurile globale se găsesc în:

assets/css/main.css

Modificați conținutul blogului

Conținutul simulat poate fi actualizat în:

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

Acest lucru vă permite să prototipați rapid diferite seturi de date pentru bloguri.

Actualizați setările aplicației

Constantele aplicației, cum ar fi navigarea, brandingul și linkurile sociale, sunt stocate în:

utils/constants.ts

De ce să folosești acest șablon de blog Nuxt?

Acest proiect este o alegere excelentă pentru dezvoltatori, deoarece oferă:

Arhitectură Nuxt 3 curată
Structura codului la nivel de producție
API simulat pentru dezvoltare frontend
Interfață de utilizator modernă cu Tailwind CSS
Pagini pregătite pentru SEO
Integrare ușoară cu API-uri reale

Funcționează atât ca proiect de învățare, cât și ca fundație pentru blog pregătită pentru producție .

Repozitoriu GitHub

Puteți explora codul sursă complet aici: 👉 https://github.com/bfotool/nuxtjs-base-blog

Dacă proiectul vi se pare util, luați în considerare adăugarea unei steluțe la depozit și contribuirea cu îmbunătățiri.