close

Samfurin Blog na Nuxt 3 Base – Bfotool Nuxtjs Base Blog(Vue 3 + TypeScript + Tailwind)

Idan kuna neman samfurin farko na shafin yanar gizo na Nuxt 3 na zamani, Bfotool Nuxtjs Base Blog mafita ce mai kyau. Aikace-aikacen shafin yanar gizo ne mai cikakken aiki wanda aka gina tare da Nuxt 3, Vue 3, TypeScript, da Tailwind CSS, wanda aka tsara don taimakawa masu haɓakawa su gina shafin yanar gizo na ƙwararru cikin sauri ba tare da buƙatar backend ba yayin haɓakawa.

Aikin ya haɗa da wani layin API na karya wanda Axios interceptors ke amfani da shi, wanda ke kwaikwayon ainihin REST API. Wannan ya sa ya zama cikakke don koyon gine-ginen Nuxt, aikace-aikacen samfura, ko gina dandamalin blog waɗanda suka shirya samarwa.

Za ku iya bincika ma'ajiyar bayanai a nan: 👉 https://github.com/bfotool/nuxtjs-base-blog

Menene Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog wani samfurin aikace-aikacen blog ne na zamani wanda aka gina ta amfani da sabbin fasahohin frontend. Yana ba da cikakken hanyar haɗin yanar gizo tare da rubuce-rubuce, rukunoni, ayyukan bincike, da shafukan tuntuɓar.

An tsara aikin ne da tsarin gine-gine mai tsabta na Nuxt 3, wanda hakan ke sauƙaƙa fahimta da faɗaɗa shi.

Muhimman abubuwan da suka fi daukar hankali sun hada da:

  • Cikakken UI na shafin yanar gizo tare da ƙira mai amsawa

  • Mock REST API don haɓakawa ba tare da ƙarshen baya ba

  • An gina shi da tsarin API na Vue 3 na zamani

  • Haɓaka aminci ta hanyar amfani da TypeScript

  • Tsarin meta na SEO-shirye

  • Tallafin jigo mai duhu da haske

Ana iya samun ma'ajiyar a nan:

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

Wannan samfurin ya dace da:

  • Shafukan yanar gizo na mutum

  • Blogs na kamfani

  • Fayilolin masu haɓakawa

  • Tsarin gine-gine na Nuxt 3 na Koyo

  • Saurin samfurin gidajen yanar gizo na abun ciki

Mahimman Sifofi

C class="ac-h3"cikakken Shafukan Blog

Samfurin ya ƙunshi cikakken saitin shafuka da ake buƙata a dandamalin rubutu.

Manyan shafuka sun haɗa da:

  • Shafin Farko- Yana nuna rubutun gwarzo da aka nuna, matattarar rukuni, da rubuce-rubuce masu shafi

  • Shafin Rubutun Blog- Cikakken bayanin labarin tare da teburin abubuwan da ke ciki da rubuce-rubuce masu alaƙa

  • Shafin Rukuni- Duba rubuce-rubucen da aka tace ta rukuni

  • Shafin Bincike- Bincike na ainihin lokaci tare da aikin debounce

  • Game da Shafi- Gabatar da ƙungiyar ku, manufa, ko alamar ku

  • Shafin Tuntuɓa- Fom ɗin tuntuɓa tare da tabbatarwa da kuma ra'ayoyin burodi

  • Shafin Kuskure- UI na sarrafa kurakurai na musamman

Wannan tsari yana ba da damar yin amfani da shafin yanar gizo ga masu amfani.

<class="ac-h3"h3>Layin API na bogi don Ci gaba

Ɗaya daga cikin mafi kyawun fasalulluka na wannan aikin shine tsarin API na gwaji .

Maimakon haɗawa zuwa ainihin backend, aikin yana kwaikwayon martanin API ta amfani da Axios interceptors .

Wannan hanyar tana bawa masu haɓaka damar:

  • Gina fasalulluka na gaba ba tare da dogaro da baya ba

  • Gwada shafin shafi, tacewa, da kuma rarrabawa

  • Kwaikwayi ainihin jinkirin amsawar API

  • Sauƙaƙa canzawa zuwa ainihin backend daga baya

Tsarin API ɗin ya haɗa da maki kamar:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Saboda an cire API ɗin ta hanyar amfani da useApi composable, canzawa zuwa ainihin backend yana buƙatar ƙaramin tsari.

Tsarin Gine-gine na zamani na Nuxt 3

Aikin ya bi shawarwarin tsarin ci gaban Nuxt 3, wanda hakan ya sa ya zama kyakkyawan misali ga masu haɓaka waɗanda ke koyon tsarin.

Muhimman siffofin gine-gine sun haɗa da:

  • Abubuwan da aka shigo da su ta atomatik da abubuwan da aka haɗa

  • TypeScript-farko ci gaba

  • Tsarin sabis na API mai haɗawa

  • Tsarin babban fayil mai sassauƙa

  • Tsarin meta na SEO

  • Canjin shafi

Application ɗin yana kuma amfani da:

  • useSeoMeta()don alamun SEO

  • useColorMode()don sauya jigo

  • useRoute()da sauran abubuwan haɗin Nuxt da aka gina a ciki

<class="ac-h3"h3>Yanayin Duhu da Tsarin Mai Amsawa

UI yana goyan bayan jigogi masu duhu da haske ta amfani da @nuxtjs/color-mode.

Fasaloli sun haɗa da:

  • Gano jigon tsarin ta atomatik

  • Canja jigo da hannu

  • Tsarin CSS na Tailwind

  • Tsarin amsawa na farko ta wayar hannu

Wannan yana tabbatar da cewa shafin yanar gizon yana aiki ba tare da wata matsala ba a duk faɗin:

  • Tebur

  • Allunan

  • Na'urorin hannu

Fasalin P="ac-h3"Fasahohin Blog masu kyau

Samfurin shafin yanar gizo ya ƙunshi fasaloli da dama na ci gaba waɗanda galibi ake samu a dandamalin samar da shafin yanar gizo.

Waɗannan sun haɗa da:

  • Teburin abubuwan da aka samar daga kanun labarai na markdown

  • Shawarwari kan rubuce-rubuce masu alaƙa

  • Kimanta lokacin karatu

  • Tace rukuni

  • An yi watsi da binciken cikakken rubutu

  • Shafin shafi mai wayo

  • Sanarwa game da gasa burodi

  • Loda kayan kwarangwal

  • Canjin shafi mai rai

Waɗannan fasalulluka suna ƙirƙirar ƙwarewar karatu ta zamani ga masu ziyartar shafin yanar gizo.

Tarin Fasaha

An gina aikin ta amfani da tsarin zamani na frontend stack.

Layer Fasaha
Tsarin tsari NUXT 3.15
Laburaren UI Visue 3.5
Harshe Rubutun Nau'i 5.7
Salo Tailwind CSS 3.4
Gudanar da Jiha Pinia
Abokin Ciniki na HTTP Axios
Gumaka Yi alama ta hanyar @nuxt/icon
Jigo @nuxtjs/yanayin launi
Rufin rufi ESLint
Tsarin Mafi kyau

Wannan kayan aiki yana ba da damar daidaitawa, daidaitawa, da kuma daidaitawa .

Bayanin Tsarin Aiki

Ma'ajiyar tana bin tsari mai tsabta da tsari.

Muhimman kundin adireshi sun haɗa da:

Shafuka

Jagorar pagesta bayyana manyan hanyoyin:

  • index.vue- Shafin Farko

  • about.vue– Game da shafi

  • contact.vue– Fom ɗin Tuntuɓa

  • search.vue- Binciken bincike

  • blog/[slug].vue– Shafin rubutun blog

  • blog/category/[slug].vue– Shafin rukuni

Com class="ac-h3"proponents

An rarraba abubuwan UI da za a iya sake amfani da su zuwa rukunoni masu ma'ana:

  • layout- Kanun da ƙafa

  • common- Faifan shafi, masu ɗaukar kwarangwal, sanarwar gasa burodi

  • blog– Abubuwan da suka shafi shafukan yanar gizo kamar katunan gaisuwa da teburin abubuwan da ke ciki

Comp class="ac-h3"osables

Jadawalin kayan haɗin ya ƙunshi dabaru masu sake amfani.

Muhimman abubuwan da aka haɗa sun haɗa da:

  • useApi()- Tsarin sabis na API da aka buga

  • useDebounce()- Rage ƙimar amsawa

<class="ac-h3"h3>Layin API na Mock

Tsarin gwaji yana cikin mockskundin adireshi.

Ya ƙunshi:

  • handlers.ts- Masu katse buƙatun API

  • posts.ts– Misalan rubuce-rubucen blog

  • authors.ts– Bayanan marubucin

  • categories.ts– Bayanan rukuni

Wannan tsari yana sauƙaƙa gyara da faɗaɗa aikin .

Yadda ake Shigarwa da Gudanar da Aikin

Bi waɗannan matakan don gudanar da aikin a cikin gida.

Prereq class="ac-h3"uisites

Kana buƙatar:

  • Node.js 18.17 ko sama da haka

  • npm, yarn, ko pnpm

Clone da Ma'ajiyar

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

class="ac-h3"Shigar da Dogayen Abubuwan da suka Dace

npm install

Fara Sabar Ci Gaba

npm run dev

Sai ka buɗe burauzarka a:

http://localhost:3000

Sabar haɓaka Nuxt za ta sake cika ta atomatik lokacin da fayiloli suka canza.

Canjawa daga Mock API zuwa Real API

Ɗaya daga cikin mafi kyawun shawarwari na ƙira a cikin wannan aikin shine sauƙin sauyawar API .

Don haɗa ainihin backend:

  1. Saita canjin muhalli:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Saita adireshin API ɗinku na asali:

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

  1. Tabbatar cewa amsar ku ta baya ta yi daidai da nau'ikan da aka ayyana a cikin:

types/index.ts

Ba a buƙatar ƙarin canje-canjen lambar ba.

Keɓance Blog ɗin

Masu haɓakawa za su iya keɓance samfurin cikin sauƙi.

Canza Jigo ko Salo

Gyara tsarin Tailwind:

tailwind.config.ts

Salo na duniya suna cikin:

assets/css/main.css

Gyara Abubuwan da ke Cikin Blog

Ana iya sabunta abun ciki na gwaji a cikin:

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

Wannan yana ba ku damar yin samfurin bayanai daban-daban na blog cikin sauri.

Sabunta Saitunan Manhaja

Ana adana ma'aunin aikace-aikace kamar kewayawa, alamar kasuwanci, da hanyoyin haɗin yanar gizo a cikin:

utils/constants.ts

Me Yasa Ake Amfani Da Wannan Samfurin Blog Na Nuxt?

Wannan aikin kyakkyawan zaɓi ne ga masu haɓakawa saboda yana samar da:

  • Tsarin gine-gine na Tsabtace Nuxt 3

  • Tsarin lambar matakin samarwa

  • Mock API don haɓaka frontend

  • UI na zamani tare da Tailwind CSS

  • Shafukan da aka shirya don SEO

  • Haɗin kai mai sauƙi tare da ainihin APIs

Yana aiki duka a matsayin aikin ilmantarwa da kuma a matsayin tushen yanar gizo mai shirye-shiryen samarwa .

Ma'ajiyar GitHub

Za ku iya bincika cikakken lambar tushe a nan: 👉 https://github.com/bfotool/nuxtjs-base-blog

Idan aikin ya yi amfani, yi la'akari da nuna ma'ajiyar bayanai da kuma bayar da gudummawa ga ci gaba.