Szablon bloga Nuxt 3 Base – Bfotool Nuxtjs Base Blog(Vue 3 + TypeScript + Tailwind)

Jeśli szukasz nowoczesnego szablonu startowego bloga Nuxt 3, Bfotool Nuxtjs Base Blog to doskonałe rozwiązanie. To w pełni funkcjonalna aplikacja blogowa zbudowana w Nuxt 3, Vue 3, TypeScript i Tailwind CSS, zaprojektowana, aby pomóc programistom szybko zbudować profesjonalnego bloga bez konieczności korzystania z zaplecza podczas tworzenia.

Projekt zawiera fałszywą warstwę API opartą na przechwytywaczach Axios, która symuluje prawdziwe API REST. Dzięki temu idealnie nadaje się do nauki architektury Nuxt, prototypowania aplikacji lub budowania gotowych do produkcji platform blogowych.

Możesz przeglądać repozytorium tutaj: 👉 https://github.com/bfotool/nuxtjs-base-blog

Czym jest Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog to nowoczesny szablon aplikacji blogowej zbudowany z wykorzystaniem najnowszych technologii front-endowych. Oferuje kompletny interfejs blogowy z wpisami, kategoriami, funkcją wyszukiwania i stronami kontaktowymi.

Projekt został zaprojektowany w oparciu o czystą architekturę Nuxt 3, dzięki czemu jest łatwy do zrozumienia i rozbudowy.

Najważniejsze punkty obejmują:

Pełny interfejs bloga z responsywnym projektem
Symulowany interfejs API REST do tworzenia oprogramowania bez zaplecza
Zbudowany przy użyciu nowoczesnego interfejsu API kompozycji Vue 3
Bezpieczne programowanie z użyciem TypeScript
Konfiguracja meta gotowa pod kątem SEO
Obsługa motywu jasnego i ciemnego

Repozytorium można znaleźć tutaj:

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

Ten szablon jest idealny dla:

Blogi osobiste
Blogi firmowe
Portfele programistów
Nauka architektury Nuxt 3
Szybkie prototypowanie stron internetowych z treścią

Główne cechy

C class="ac-h3"kompletne strony bloga

Szablon zawiera w pełni zaimplementowany zestaw stron, które są zazwyczaj wymagane na platformie blogowej.

Główne strony zawierają:

Strona główna – wyświetla wyróżniony wpis bohatera, filtry kategorii i podzielone na strony wpisy
Strona wpisu na blogu – widok pełnego artykułu ze spisem treści i powiązanymi wpisami
Strona kategorii – przeglądaj posty filtrowane według kategorii
Strona wyszukiwania – wyszukiwanie w czasie rzeczywistym z funkcją usuwania odrzuceń
Strona „O nas” – Przedstaw swój zespół, misję lub markę
Strona kontaktowa – formularz kontaktowy z walidacją i opiniami
Strona błędu – niestandardowy interfejs użytkownika do obsługi błędów

Taka struktura zapewnia użytkownikom gotowe do użycia środowisko bloga .

< class="ac-h3"h3>Fałszywa warstwa API do celów programistycznych

Jedną z najpotężniejszych cech tego projektu jest system pozorowanego API .

Zamiast łączyć się z prawdziwym zapleczem, projekt symuluje odpowiedzi API przy użyciu przechwytywaczy Axios .

Dzięki takiemu podejściu programiści mogą:

Twórz funkcje front-end bez zależności back-end
Przetestuj paginację, filtrowanie i sortowanie
Symuluj rzeczywiste opóźnienia odpowiedzi API
Łatwe przejście na prawdziwy back-end później

Interfejs API zawiera punkty końcowe, takie jak:

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

Ponieważ API jest abstrakcyjne za pomocą composable useApi, przejście na prawdziwy back-end wymaga minimalnej konfiguracji.

Nowoczesna architektura Nuxt 3

Projekt jest zgodny z zalecanymi wzorcami programowania Nuxt 3, co czyni go świetnym punktem odniesienia dla programistów uczących się obsługi tego frameworka.

Do ważnych cech architektonicznych zalicza się:

Automatycznie importowane komponenty i elementy kompozycyjne
Rozwój w TypeScript
Warstwa usług API Composable
Modułowa struktura folderów
Konfiguracja meta SEO
Przejścia stron

Aplikacja wykorzystuje również:

useSeoMeta()dla tagów SEO
useColorMode()do przełączania motywów
useRoute()i inne wbudowane elementy kompozycyjne Nuxt

Tryb ciemny i responsywny projekt

Interfejs użytkownika obsługuje ciemne i jasne motywy@nuxtjs/color-mode .

Funkcje obejmują:

Automatyczne wykrywanie motywu systemu
Ręczne przełączanie motywu
Stylizacja Tailwind CSS
Układ responsywny dostosowany do urządzeń mobilnych

Dzięki temu blog będzie działał bezproblemowo w następujących systemach:

Pulpit
Tabletki
Urządzenia mobilne

P class="ac-h3"potężne funkcje bloga

Szablon bloga zawiera kilka zaawansowanych funkcji, które zwykle można znaleźć na platformach blogowych przeznaczonych do produkcji.

Należą do nich:

Spis treści wygenerowany z nagłówków Markdown
Sugestie powiązanych postów
Szacowany czas czytania
Filtrowanie kategorii
Odrzucone wyszukiwanie pełnotekstowe
Inteligentna paginacja
Powiadomienia typu toast
Ładowanie komponentów szkieletu
Animowane przejścia stron

Dzięki tym funkcjom czytelnicy bloga mogą cieszyć się nowoczesnym doświadczeniem .

Stos technologiczny

Projekt został zbudowany przy użyciu nowoczesnego stosu front-end.

Warstwa	Technologia
Struktura	Nuxt 3.15
Biblioteka interfejsu użytkownika	Widok 3.5
Język	TypeScript 5.7
Stylizacja	Tailwind CSS 3.4
Zarządzanie państwem	Pinia
Klient HTTP	Axios
Ikony	Iconify przez @nuxt/icon
Temat	@nuxtjs/tryb-kolorów
Kłapanie	ESLint
Formatowanie	Ładniejszy

Ten stos zapewnia wydajność, skalowalność i łatwość utrzymania .

Przegląd struktury projektu

Repozytorium ma przejrzystą i zorganizowaną strukturę.

Do ważniejszych katalogów zaliczamy:

Strony

Katalog pagesdefiniuje główne trasy:

index.vue– Strona główna
about.vue– O stronie
contact.vue– Formularz kontaktowy
search.vue– Interfejs wyszukiwania
blog/[slug].vue– Strona wpisu na blogu
blog/category/[slug].vue– Strona kategorii

Komponenty klasy Com="ac-h3"

Komponenty interfejsu użytkownika wielokrotnego użytku są pogrupowane w logiczne kategorie:

layout– Nagłówek i stopka
common– Paginacja, ładowarki szkieletowe, powiadomienia typu toast
blog– Elementy specyficzne dla bloga, takie jak pocztówki i spis treści

Klasa Comp="ac-h3"osables

Katalog composables zawiera logikę wielokrotnego użytku.

Ważne obiekty kompozycyjne obejmują:

useApi()– Warstwa usługi API typu
useDebounce()– Odrzuć wartości reaktywne

< class="ac-h3"h3>Warstwa pozorowanego API

System pozorowany znajduje się wewnątrz mockskatalogu.

Zawiera:

handlers.ts– Przechwytywacze żądań API
posts.ts– Przykładowe wpisy na blogu
authors.ts– Dane autora
categories.ts– Dane kategorii

Taka struktura sprawia, że projekt jest łatwy do modyfikowania i rozszerzania .

Jak zainstalować i uruchomić projekt

Aby uruchomić projekt lokalnie, wykonaj poniższe kroki.

Wymagania wstępne: klasa="ac-h3"uisites

Potrzebujesz:

Node.js 18.17 lub nowszy
npm, yarn lub pnpm

Klonuj repozytorium

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

class="ac-h3"Instaluj zależności

npm install

Uruchom serwer programistyczny

npm run dev

Następnie otwórz przeglądarkę pod adresem:

http://localhost:3000

Serwer programistyczny Nuxt zostanie automatycznie przeładowany po zmianie plików.

Przejście z Mock API na Real API

Jedną z najlepszych decyzji projektowych w tym projekcie jest łatwe przełączanie API .

Aby podłączyć prawdziwy back-end:

Ustaw zmienną środowiskową:

NUXT_PUBLIC_USE_MOCK_API=false

Skonfiguruj swój podstawowy adres URL API:

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

Upewnij się, że odpowiedź zaplecza jest zgodna z typami zdefiniowanymi w:

types/index.ts

Nie są wymagane żadne dodatkowe zmiany kodu.

Dostosowywanie bloga

Programiści mogą łatwo dostosować szablon.

Zmień motyw lub styl

Edytuj konfigurację Tailwind:

tailwind.config.ts

Style globalne znajdują się w:

assets/css/main.css

Modyfikuj zawartość bloga

Treść próbną można aktualizować w:

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

Dzięki temu możesz szybko tworzyć prototypy różnych zestawów danych blogowych.

Aktualizuj ustawienia aplikacji

Stałe aplikacji, takie jak nawigacja, marka i linki społecznościowe, są przechowywane w:

utils/constants.ts

Dlaczego warto wybrać ten szablon bloga Nuxt?

Ten projekt jest doskonałym wyborem dla deweloperów, ponieważ zapewnia:

Czysta architektura Nuxt 3
Struktura kodu na poziomie produkcyjnym
Interfejs API pozorowany do tworzenia front-endu
Nowoczesny interfejs użytkownika z Tailwind CSS
Strony gotowe pod SEO
Łatwa integracja z prawdziwymi interfejsami API

Sprawdza się zarówno jako projekt edukacyjny, jak i gotowa do produkcji podstawa bloga .

Repozytorium GitHub

Pełny kod źródłowy można znaleźć tutaj: 👉 https://github.com/bfotool/nuxtjs-base-blog

Jeśli uważasz, że projekt jest przydatny, rozważ oznaczenie repozytorium gwiazdką i wprowadzenie ulepszeń.