Nuxt 3 -perusblogin mallipohja – Bfotool Nuxtjs-perusblogi(Vue 3 + TypeScript + Tailwind)

Jos etsit modernia Nuxt 3 -blogin aloitusmallia, Bfotool Nuxtjs Base Blog on erinomainen ratkaisu. Se on täysin toimiva blogisovellus, joka on rakennettu Nuxt 3:lla, Vue 3:lla, TypeScriptillä ja Tailwind CSS: llä ja suunniteltu auttamaan kehittäjiä rakentamaan nopeasti ammattimaisen blogin ilman erillistä taustajärjestelmää kehitysvaiheessa.

Projekti sisältää Axios-interceptoreiden tehostaman väärennetyn API-kerroksen, joka simuloi todellista REST-API:a. Tämä tekee siitä täydellisen Nuxt-arkkitehtuurin oppimiseen, sovellusten prototyyppien luomiseen tai tuotantovalmiiden blogialustojen rakentamiseen.

Voit tutustua arkistoon täällä: 👉 https://github.com/bfotool/nuxtjs-base-blog

Mikä on Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog on moderni blogisovellusmalli, joka on rakennettu uusimpia käyttöliittymäteknologioita käyttäen. Se tarjoaa täydellisen blogikäyttöliittymän, jossa on julkaisuja, kategorioita, hakutoiminto ja yhteystietosivut.

Projekti on suunniteltu puhtaalla Nuxt 3 -arkkitehtuurilla, joten sitä on helppo ymmärtää ja laajentaa.

Tärkeimpiä kohokohtia ovat:

Täysi blogikäyttöliittymä responsiivisella suunnittelulla
Mock REST API kehitykseen ilman taustajärjestelmää
Rakennettu modernilla Vue 3 Composition API:lla
Tyyppiturvallinen kehitys TypeScriptin avulla
SEO-valmis metakonfiguraatio
Tumman ja vaalean teeman tuki

Arkisto löytyy täältä:

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

Tämä malli sopii erinomaisesti:

Henkilökohtaiset blogit
Yritysblogit
Kehittäjäportfoliot
Nuxt 3 -arkkitehtuurin oppiminen
Sisältösivustojen nopea prototyyppien luominen

Tärkeimmät ominaisuudet

C class="ac-h3"kokonaiset blogisivut

Mallipohja sisältää täysin toteutetun joukon sivuja, joita tyypillisesti tarvitaan blogialustalla.

Pääsivut sisältävät:

Etusivu – Näyttää esittelyssä olevan sankaripostauksen, luokkasuodattimet ja sivutetut postaukset
Blogikirjoitussivu – Koko artikkelin näkymä sisällysluettelon ja aiheeseen liittyvien julkaisujen kera
Kategoriasivu – Selaa kategorian mukaan suodatettuja julkaisuja
Hakusivu – Reaaliaikainen haku palautusvirheiden estämiseksi
Tietoja-sivu – Esittele tiimisi, missiosi tai brändisi
Yhteydenottosivu – Yhteydenottolomake, jossa on vahvistus ja palaute
Virhesivu – Mukautettu virheenkäsittelykäyttöliittymä

Tämä rakenne tarjoaa käyttäjille käyttövalmiin blogikokemuksen .

< class="ac-h3"h3>Vale API-kerros kehitystä varten

Yksi tämän projektin tehokkaimmista ominaisuuksista on mock API -järjestelmä .

Sen sijaan, että projekti yhdistettäisiin oikeaan taustajärjestelmään, se simuloi API-vastauksia Axios-interceptoreiden avulla .

Tämä lähestymistapa antaa kehittäjille mahdollisuuden:

Rakenna käyttöliittymän ominaisuuksia ilman taustajärjestelmän riippuvuuksia
Sivutuksen, suodatuksen ja lajittelun testaaminen
Simuloi todellisia API-vastausviiveitä
Vaihda helposti oikeaan taustajärjestelmään myöhemmin

Mock-API sisältää päätepisteitä, kuten:

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

Koska API on abstraktoitu useApi-komposition kautta, vaihtaminen oikeaan taustajärjestelmään vaatii vain vähän konfigurointia.

Moderni Nuxt 3 -arkkitehtuuri

Projekti noudattaa suositeltuja Nuxt 3 -kehitysmalleja, mikä tekee siitä erinomaisen referenssin kehittäjille, jotka opettelevat viitekehystä.

Tärkeitä arkkitehtonisia ominaisuuksia ovat:

Automaattisesti tuodut komponentit ja koottavat tiedostot
TypeScript-lähtöinen kehitys
Yhdistettävä API-palvelukerros
Modulaarinen kansiorakenne
SEO-metakonfiguraatio
Sivusiirtymät

Sovellus käyttää myös:

useSeoMeta()SEO-tageille
useColorMode()teeman vaihtoa varten
useRoute()ja muut sisäänrakennetut Nuxt-kompositiot

< class="ac-h3"h3>Tumma tila ja responsiivinen muotoilu

Käyttöliittymä tukee tummia ja vaaleita teemoja käyttämällä @nuxtjs/color-mode.

Ominaisuuksiin kuuluvat:

Automaattinen järjestelmäteeman tunnistus
Manuaalinen teeman vaihto
Tailwind CSS -tyyli
Mobiililähtöinen responsiivinen asettelu

Tämä varmistaa, että blogi toimii saumattomasti seuraavissa palveluissa:

Työpöytä
Tabletit
Mobiililaitteet

P class="ac-h3" mahtavat blogin ominaisuudet

Blogimalli sisältää useita edistyneitä ominaisuuksia, jotka tyypillisesti löytyvät tuotantoblogialustoista.

Näitä ovat:

Markdown-otsikoista luotu sisällysluettelo
Aiheeseen liittyviä ehdotuksia
Arvioitu lukuaika
Luokkien suodatus
Deboned-kokotekstihaku
Älykäs sivutus
Ilmoitukset paahtauksesta
Rungon osien lataaminen
Animoidut sivusiirtymät

Nämä ominaisuudet luovat blogin kävijöille modernin lukukokemuksen .

Teknologiapino

Projekti on rakennettu käyttämällä modernia frontend-pinoa.

Kerros	Teknologia
Kehys	Nuxt 3.15
Käyttöliittymäkirjasto	Vue 3.5
Kieli	TypeScript 5.7
Muotoilu	Myötätuuli CSS 3.4
Valtionhallinto	Pinia
HTTP-asiakasohjelma	Axios
Kuvakkeet	Iconify @nuxt/icon-käyttäjän kautta
Teema	@nuxtjs/color-mode
Nukkautuminen	ESLint
Muotoilu	Kauniimpi

Tämä pino tarjoaa suorituskykyä, skaalautuvuutta ja ylläpidettävyyttä .

Projektin rakenteen yleiskatsaus

Tietovarasto noudattaa selkeää ja järjestelmällistä rakennetta.

Tärkeitä hakemistoja ovat:

Sivut

Hakemisto pagesmäärittelee pääreitit:

index.vue– Etusivu
about.vue– Tietoja-sivu
contact.vue– Yhteydenottolomake
search.vue– Hakukäyttöliittymä
blog/[slug].vue– Blogikirjoitussivu
blog/category/[slug].vue– Kategoriasivu

Com class="ac-h3" -komponentit

Uudelleenkäytettävät käyttöliittymäkomponentit on ryhmitelty loogisiin luokkiin:

layout– Ylätunniste ja alatunniste
common– Sivutus, luurankolataajat, paahtoleipäilmoitukset
blog– Blogikohtaiset komponentit, kuten postikortit ja sisällysluettelo

Comp-luokka="ac-h3"osables

Compositables-hakemisto sisältää uudelleenkäytettävää logiikkaa.

Tärkeitä komposiittimateriaaleja ovat:

useApi()– Tyypitetty API-palvelukerros
useDebounce()– Reaktiivisten arvojen vähentäminen

< class="ac-h3"h3>Mock API -kerros

Mallijärjestelmä sijaitsee hakemiston sisällä mocks.

Se sisältää:

handlers.ts– API-pyyntöjen sieppaajat
posts.ts– Esimerkkiblogikirjoituksia
authors.ts– Tekijän tiedot
categories.ts– Kategoriatiedot

Tämä rakenne tekee projektista helposti muokattavissa ja laajennettavissa .

Projektin asentaminen ja suorittaminen

Suorita projekti paikallisesti noudattamalla näitä ohjeita.

Edellytys class="ac-h3"uisites

Tarvitset:

Node.js 18.17 tai uudempi
npm, lanka tai pnpm

Kloonaa arkisto

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

class="ac-h3"Asenna riippuvuudet

npm install

Käynnistä kehityspalvelin

npm run dev

Avaa sitten selaimesi osoitteessa:

http://localhost:3000

Nuxt-kehityspalvelin latautuu automaattisesti uudelleen, kun tiedostot muuttuvat.

Vaihtaminen Mock-API:sta Real-API:in

Yksi parhaista suunnitteluratkaisuista tässä projektissa on helppo API-kytkin .

Yhdistääksesi oikean taustajärjestelmän:

Aseta ympäristömuuttuja:

NUXT_PUBLIC_USE_MOCK_API=false

Määritä API-perus-URL-osoitteesi:

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

Varmista, että taustajärjestelmän vastauksesi vastaa kohdassa määriteltyjä tyyppejä:

types/index.ts

Lisämuutoksia koodiin ei tarvita.

Blogin mukauttaminen

Kehittäjät voivat helposti mukauttaa mallipohjaa.

Vaihda teemaa tai tyylejä

Muokkaa Tailwind-määrityksiä:

tailwind.config.ts

Globaalit tyylit sijaitsevat:

assets/css/main.css

Muokkaa blogin sisältöä

Valesisältöä voidaan päivittää seuraavissa kohteissa:

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

Näin voit nopeasti prototyypata erilaisia blogidatajoukkoja.

Päivitä sovellusasetukset

Sovellusvakiot, kuten navigointi, brändäys ja sosiaaliset linkit, tallennetaan seuraaviin paikkoihin:

utils/constants.ts

Miksi käyttää tätä Nuxt-blogimallia?

Tämä projekti on loistava valinta kehittäjille, koska se tarjoaa:

Puhdas Nuxt 3 -arkkitehtuuri
Tuotantotason koodirakenne
Mock-API käyttöliittymäkehitykseen
Moderni käyttöliittymä Tailwind CSS:llä
SEO-valmiit sivut
Helppo integrointi oikeiden API-rajapintojen kanssa

Se toimii sekä oppimisprojektina että tuotantovalmiina blogin pohjana .

GitHub-arkisto

Voit tutustua koko lähdekoodiin täällä: 👉 https://github.com/bfotool/nuxtjs-base-blog

Jos pidät projektia hyödyllisenä, harkitse repositorion tähdittämistä ja parannusten tekemistä.